/* Fonts use font-display:optional (and are preloaded): the browser waits a moment for the cached
   font instead of painting the menu in a fallback font first, which made it flicker on every page. */
/* KENR0CK theme: base, pill menu, homepage wall, portfolio, pages, footer strip, cart panel.
   Black and white. Headings: Archivo Condensed Italic. Body: Archivo (normal width, upright). Fonts are self-hosted. */

@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:optional;
  src:url(../fonts/archivo-wdth-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:optional;
  src:url(../fonts/archivo-wdth-normal-latin.woff2) format("woff2")}

/* ---------- Design tokens ---------- */
:root{
  color-scheme:light;
  --white:#FFFFFF;
  --black:#000000;
  --grey:#6E6E6E;      /* secondary text, passes AA on white */
  --line:#D9D9D9;      /* hairlines */
  --tile:#F2F2F2;      /* image ground */
  --f-head:"Archivo","Arial Narrow",Arial,sans-serif;
  --head-style:italic; --head-width:68%;  /* Archivo Condensed Italic */
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:22px; --t-xl:clamp(2.25rem,5vw,4rem);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:72px;
  --cap:1500px;        /* inner pages stop growing past this width (desktop); homepage stays full-screen */
  --r-frame:18px; --r-pill:999px;
  --gl:max(16px, env(safe-area-inset-left,0px));
  --gr:max(16px, env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.215,.61,.355,1);
  --bar:0px;            /* WordPress admin bar height when logged in */
}
.admin-bar{--bar:32px}
@media (max-width:782px){.admin-bar{--bar:46px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--white);color:var(--black)}
body{font-family:var(--f-body);font-size:var(--t-md);line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
/* Every field on the site (contact form, coupon, checkout, account, quantity): placeholder and typed
   text look the same: Archivo, 14px, normal case. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),textarea,select,
.select2-container .select2-selection__rendered,.select2-results__option{font-family:var(--f-body)!important;font-style:normal!important;font-stretch:100%;font-weight:400!important;font-size:var(--t-sm)!important;text-transform:none;letter-spacing:0;color:var(--black)}
::placeholder{font-family:var(--f-body);font-style:normal;font-weight:400;font-size:var(--t-sm);text-transform:none;letter-spacing:0;color:var(--grey);opacity:1}
.select2-container .select2-selection__placeholder{color:var(--grey)}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.head,.up{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:200;background:var(--black);color:var(--white);padding:10px 14px}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.small{font-size:var(--t-sm);color:var(--grey);margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--black);color:var(--white);border:1.5px solid var(--black);font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;font-size:19px;text-transform:uppercase;padding:14px 20px;text-decoration:none;cursor:pointer;line-height:1;border-radius:0}
.btn:hover{background:var(--white);color:var(--black)}
.btn.ghost{background:var(--white);color:var(--black)}
.btn.ghost:hover{background:var(--black);color:var(--white)}

/* ---------- Pill menu (Palace) ----------
   Centered on the full window width (50vw includes the scrollbar), so it doesn't jump when a page
   gains or loses a scrollbar on Windows. */
/* The pill sits in a fixed, full-window-width band and is centred by flexbox: no transform and no
   script, so it's drawn in its final spot on whole pixels from the very first frame (it used to be
   nudged into place by JavaScript after load, which made it jump), and a scrollbar can't move it. */
.pill-band{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + var(--bar) + 26px);left:0;width:100vw;display:flex;justify-content:center;pointer-events:none}
.pill{position:relative;pointer-events:auto;display:flex;align-items:center;gap:30px;background:var(--black);color:var(--white);border:1px solid var(--white);border-radius:var(--r-pill);padding:13px 26px;white-space:nowrap;max-width:calc(100vw - 32px)}
.pill .logo{display:block;line-height:0;margin-right:14px;flex:none}
.pill .logo .kr-logo-img{height:18px;width:auto;display:block;flex:none;max-width:none}
.pill nav{display:flex;gap:30px}
.pill a,.pill button{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;font-size:17px;text-transform:uppercase;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;color:var(--white);line-height:1}
.pill a.logo{text-decoration:none} /* the logo never reacts to hover */
.pill .cart-ic{display:flex;align-items:center;line-height:0;position:relative}
/* Cart count: white circle with a black number, on the top-right of the cart icon */
.kr-count{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--white);color:var(--black);display:grid;place-items:center;font-family:var(--f-body);font-style:normal;font-weight:600;font-size:10.5px;line-height:1;letter-spacing:0;pointer-events:none}
.pill .cart-ic svg{display:block}
.menu-tog{display:none;align-items:center;line-height:0;padding:0;margin:0}
.menu-tog line{transform-origin:12px 12px;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s}
.pill.open .menu-tog .l1{transform:rotate(45deg) translateY(5px)}
.pill.open .menu-tog .l2{opacity:0}
.pill.open .menu-tog .l3{transform:rotate(-45deg) translateY(-5px)}

/* ---------- Cart hover panel (WooCommerce mini cart, restyled) ---------- */
.mini{--pill-h:58px;position:fixed;z-index:49;top:calc(env(safe-area-inset-top,0px) + var(--bar) + 26px + var(--pill-h) + 8px);left:50vw;
  width:min(640px,calc(100vw - 32px));transform:translate(-50%,-6px);background:var(--black);color:var(--white);
  border:1px solid var(--white);border-radius:28px;padding:26px 28px;opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s var(--ease),visibility 0s linear .2s}
.mini.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s var(--ease),visibility 0s}
.mini a{color:var(--white)}
.mini .woocommerce-mini-cart__empty-message{text-align:center;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:20px;padding:22px 0;margin:0}
.mini .woocommerce-mini-cart{list-style:none;margin:0;padding:0;max-height:min(46vh,380px);overflow-y:auto}
.mini .woocommerce-mini-cart-item{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;padding:14px 32px 14px 0;border-bottom:1px solid #3A3A3A}
.mini .woocommerce-mini-cart-item>a:not(.remove){display:contents;text-decoration:none;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.1}
.mini .woocommerce-mini-cart-item img{grid-row:1/span 3;width:64px;height:64px;object-fit:contain;background:var(--white);border-radius:8px;padding:4px;box-sizing:border-box;margin:0}
.mini .woocommerce-mini-cart-item .variation{grid-column:2;margin:4px 0 0;font-size:var(--t-sm);color:#B3B3B3;display:flex;gap:4px;flex-wrap:wrap}
.mini .woocommerce-mini-cart-item .variation dt,.mini .woocommerce-mini-cart-item .variation dd,.mini .woocommerce-mini-cart-item .variation p{margin:0;display:inline}
.mini .woocommerce-mini-cart-item .quantity{grid-column:2;font-size:var(--t-sm);color:#B3B3B3;margin-top:4px}
.mini .remove{position:absolute;right:0;top:12px;text-decoration:none;font-size:22px;line-height:1;color:#B3B3B3}
.mini .remove:hover{color:var(--white)}
.mini .woocommerce-mini-cart__total{display:flex;justify-content:space-between;margin:0;padding-top:16px;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:20px}
.mini .woocommerce-mini-cart__total strong{font-weight:inherit}
#mini .woocommerce-mini-cart__buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
#mini .woocommerce-mini-cart__buttons a{display:flex;justify-content:center;align-items:center;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;font-size:19px;text-transform:uppercase;padding:14px 20px;text-decoration:none;line-height:1;border:1.5px solid var(--white);background:var(--black);color:var(--white)}
#mini .woocommerce-mini-cart__buttons a.checkout{background:var(--white);color:var(--black)}
#mini .woocommerce-mini-cart__buttons a:hover{background:var(--white);color:var(--black)}
#mini .woocommerce-mini-cart__buttons a.checkout:hover{background:var(--black);color:var(--white)}
.mini .blockUI.blockOverlay{background:rgba(0,0,0,.5)!important}

/* ---------- Homepage: one screen ---------- */
.home.wrap{height:calc(100dvh - var(--bar));padding-block:12px;display:flex;flex-direction:column}
.frame{position:relative;flex:1;min-height:0;border-radius:var(--r-frame);overflow:hidden;background:var(--black)}
/* readability: soft black fade behind the names */
.frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 18%,rgba(0,0,0,0) 38%)}
.m{position:relative;height:100%;overflow:hidden}
.t{position:relative;overflow:hidden;border:0;padding:0;background:var(--black);color:var(--white);display:block}
.t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.m .t{position:absolute;cursor:default;opacity:.2;transition:opacity .45s var(--ease)}
.m .t.on{opacity:1}
@media (hover:hover){.m .t:hover{opacity:1}.m .t:hover img{transform:scale(1.04)}} /* touch: no sticky hover */
/* before JS lays the wall out (or without JS): a plain dimmed grid */
.m.pre{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;align-content:start}
.m.pre .t{position:relative;aspect-ratio:1}
@keyframes rise{from{transform:translateY(10px)}}
.m.intro .t{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}

/* Palace-style name wheel */
.list{--row:48px;--rows:7;--mid:3;position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:3;color:var(--white);
  text-shadow:0 1px 12px rgba(0,0,0,.6);height:calc(var(--row)*var(--rows));overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 32%,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 32%,#000 68%,transparent 100%);
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  padding-left:6px;margin-left:-6px} /* room so the highlight box isn't cut off on the left; names stay where they were */
.list.dragging,.list.dragging button{cursor:grabbing}
.list .track{list-style:none;margin:0;padding:0;transition:transform .45s var(--ease);will-change:transform}
.list .track.jump{transition:none}
.list .track li{height:var(--row);display:flex;align-items:center}
.list button{background:none;border:0;cursor:inherit;color:var(--white);white-space:nowrap;text-align:left;opacity:.45;transition:opacity .3s;
  font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,2.2vw,2rem);
  padding:2px 9px 2px 4px;margin-left:-4px;line-height:1.1}
.list button[aria-current="true"],.list button:hover,.list button:focus-visible{opacity:1}
.list button[aria-current="true"]{background:var(--white);color:var(--black);text-shadow:none}

/* ---------- Footer strip (same on every page) ---------- */
.strip{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px var(--r-frame) 0;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.03em;line-height:1.2}
.strip a{text-decoration:none}
.strip a:hover,.strip a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.strip-l{justify-self:start}
.policy-title{margin:0 0 var(--s6);font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:var(--t-xl);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.strip-lg{justify-self:start;display:inline-flex;align-items:baseline;gap:16px}
.strip .strip-p{color:var(--grey)}
.strip-r{justify-self:end}
/* Footer text sits 16px above the bottom of the screen on every page (desktop), so it doesn't jump
   up or down when moving between the homepage and the other pages. Homepage: 12px wrap padding + 4px. */
.home .strip{padding-bottom:4px}
/* inner pages: same strip, with a subtle divider above it */
.strip--page{border-top:1px solid var(--line);padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:max(calc(var(--gl) + var(--r-frame)), calc((100% - var(--cap)) / 2 + var(--r-frame)));padding-right:max(calc(var(--gr) + var(--r-frame)), calc((100% - var(--cap)) / 2 + var(--r-frame)))}

/* ---------- Inner pages ---------- */
/* One alignment line for every inner page: text starts where the rounded frames' corners end.
   Rounded frames (portfolio grid, single piece) step back out to the page gutter. */
.page.wrap{padding-left:max(calc(var(--gl) + var(--r-frame)), calc((100% - var(--cap)) / 2 + var(--r-frame)));padding-right:max(calc(var(--gr) + var(--r-frame)), calc((100% - var(--cap)) / 2 + var(--r-frame)));padding-top:calc(env(safe-area-inset-top,0px) + var(--bar) + 120px);padding-bottom:var(--s7);min-height:calc(100dvh - var(--bar) - 51px)}
.page-h:not(:has(> :not(.vh))){margin:0} /* only a hidden title inside: no gap */
.page-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin:0 0 var(--s5)}
.page-h h1,.page-title{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:28px;margin:0;line-height:1}
.page-title{margin:0 0 var(--s5)} /* same size as the Portfolio / Shop titles (set with .page-h h1 above) */
.filters{display:flex;gap:var(--s4);flex-wrap:wrap}
.filters a,.filters button{background:none;border:0;padding:0;cursor:pointer;text-decoration:none;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:18px;color:var(--grey)}
.filters [aria-pressed="true"],.filters [aria-current="page"]{color:var(--black)}

/* ---------- Underline: pill links + filters ----------
   No colour change. A 2px line draws in from the left on hover and stays under the active item. */
.pill nav a,.filters a,.filters button{position:relative}
.pill nav a::after,.filters a::after,.filters button::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left center}
/* The underline only animates once the page has loaded: otherwise the browser replays it as each
   new page appears (the active link drew itself in from the left on every page change). */
.kr-ready .pill nav a::after,.kr-ready .filters a::after,.kr-ready .filters button::after{transition:transform .28s var(--ease)}
.filters a::after,.filters button::after{bottom:-4px}
.pill nav a[aria-current="page"]::after,.filters [aria-pressed="true"]::after,.filters [aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){
  .pill nav a:hover::after,.filters a:hover::after,.filters button:hover::after{transform:scaleX(1)}
}
.pill nav a:focus-visible::after,.filters a:focus-visible::after,.filters button:focus-visible::after{transform:scaleX(1)}

/* Phones: the filters wrap onto two lines, three per line, spread evenly edge to edge
   (columns line up, first column at the left edge, last at the right). */
@media (max-width:767px){
  .page-h>.filters{flex:1 1 100%}
  .filters{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;column-gap:min(12px,2.5vw);row-gap:14px}
  .filters a,.filters button{justify-self:start;white-space:nowrap;font-size:min(18px,4.8vw)}
}

/* Portfolio: gallery wall inside the rounded black frame, 4 columns, dimmed until hovered */
.pf,.single-work__frame{margin-inline:calc(var(--r-frame) * -1)}
.pf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-radius:var(--r-frame);overflow:hidden}
/* Each tile paints its own black background, so a short last row leaves white page
   instead of empty black squares. portfolio.js rounds the corners that end up on the outside edge. */
.pf .t{aspect-ratio:1;cursor:pointer;width:100%;background:var(--black);overflow:hidden}
.pf .t.r-br{border-bottom-right-radius:var(--r-frame)}
.pf .t.r-tr{border-top-right-radius:var(--r-frame)}
.pf .t img{opacity:.3;transition:opacity .35s var(--ease),transform .6s var(--ease)}
/* Dimmed with brightness instead of see-through-to-black: same look, but no black tile behind the
   artwork, which showed as a thin grey outline around light pieces (on scaled screens, e.g. 125%). */
.pf .t{background:none}
.pf .t img{opacity:1;filter:brightness(.3);transition:filter .35s var(--ease),transform .6s var(--ease)}
.pf .t:hover img,.pf .t:focus-visible img{opacity:1;filter:none}
.pf-name{position:absolute;left:12px;bottom:12px;z-index:2;background:var(--white);color:var(--black);font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.1;padding:3px 10px 3px 8px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:left}
.pf .t:hover .pf-name,.pf .t:focus-visible .pf-name{opacity:1}
@media (hover:none){.pf .t img{opacity:1;filter:none}}  /* touch screens have no hover: full brightness */

/* Full-screen viewer */
.lb{position:fixed;inset:0;z-index:80;background:var(--black);color:var(--white);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gr) calc(env(safe-area-inset-bottom,0px) + 18px) var(--gl)}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.lb button{background:none;border:0;color:var(--white);cursor:pointer;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;font-size:19px;text-transform:uppercase}
.lb-stage{position:relative;margin:var(--s4) auto;width:min(100%,76vh);aspect-ratio:1;align-self:center}
.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb h2{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:24px;margin:0;text-align:center}
.kr-lb-open{overflow:hidden}

/* Single portfolio item */
.single-work__frame{border-radius:var(--r-frame);overflow:hidden;background:var(--black);max-width:calc(1000px + var(--r-frame) * 2)}
.single-work__frame img{display:block;width:100%;height:auto}
.single-work__cats{margin-top:var(--s3)}
.single-work .page-h{max-width:1000px}
.back{text-decoration:none}

/* Regular pages (Contact, policies) */
.prose-wrap{max-width:720px}
.prose{max-width:66ch}
.prose h2,.prose h3{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;line-height:1;margin:var(--s6) 0 var(--s3)}
.prose h2{font-size:24px} .prose h3{font-size:20px}
.prose p,.prose ul,.prose ol{margin:0 0 var(--s4)}
.prose a{text-underline-offset:3px}
/* Refund & Returns / Privacy: two even columns on desktop, one on phones and tablets */
.policy-title:has(+ .policy-intro){margin-bottom:var(--s3)}
.policy-intro{margin-bottom:var(--s6)}
.policy-intro>:last-child{margin-bottom:0}
.prose--policy .policy-sec>:first-child{margin-top:0}
.prose--policy .policy-sec{margin-bottom:var(--s6)}
@media (min-width:1024px){
  .prose-wrap:has(.prose--policy){max-width:none}
  .prose--policy{max-width:none;column-count:2;column-gap:var(--s7)}
  .prose--policy .policy-sec{break-inside:avoid;display:inline-block;width:100%}
}
.socials{display:flex;gap:var(--s5);flex-wrap:wrap}
.socials a{text-decoration:none}
.socials a:hover{text-decoration:underline}
.post-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}

/* Contact Form 7 */
.wpcf7 form{display:grid;gap:var(--s4)}
.wpcf7 p{margin:0}
.wpcf7 label{display:block;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:16px}
.wpcf7 .wpcf7-form-control-wrap{display:block;margin-top:6px}
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 textarea{width:100%;border:1.5px solid var(--black);border-radius:0;padding:12px;background:var(--white);font-family:var(--f-body);font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--t-sm)}
.wpcf7 textarea{min-height:150px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none;box-shadow:none} /* active fields look the same as the rest */
.wpcf7 input[type="submit"]{justify-self:start;background:var(--black);color:var(--white);border:1.5px solid var(--black);font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;font-size:19px;text-transform:uppercase;padding:14px 20px;cursor:pointer;border-radius:0}
.wpcf7 input[type="submit"]:hover{background:var(--white);color:var(--black)}
.kr-star{color:#D0021B}
/* Errors: missing fields get a red outline and a red note (the page also jumps to the first one) */
.wpcf7 input.wpcf7-not-valid,.wpcf7 textarea.wpcf7-not-valid,.wpcf7 input.wpcf7-not-valid:focus,.wpcf7 textarea.wpcf7-not-valid:focus{border-color:#D0021B;box-shadow:inset 0 0 0 1px #D0021B}
.wpcf7 .kr-pkg.wpcf7-not-valid .kr-pkg__box,.wpcf7 .kr-cards.wpcf7-not-valid .kr-card__img{outline:2px solid #D0021B;outline-offset:-2px}
.wpcf7 .wpcf7-not-valid-tip{color:#D0021B!important;font-stretch:100%;font-weight:400;font-size:13px}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output{border-color:#D0021B;color:#D0021B}
.wpcf7 form.sent .wpcf7-response-output{display:none}
/* Sending: button can't be clicked twice */
.wpcf7 form.submitting input[type="submit"]{opacity:.55;pointer-events:none}
/* Sent: the form is swapped for this panel */
.kr-sent{position:relative;background:var(--black);color:var(--white);padding:44px 40px;display:grid;gap:18px;scroll-margin-top:120px}
.kr-sent__x{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--white);cursor:pointer;padding:0}
.kr-sent__x:hover{opacity:.7}
.kr-sent__x:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.kr-sent__ic{width:56px;height:56px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center}
.kr-sent h3{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:clamp(36px,5vw,56px);line-height:.95;margin:0}
.kr-sent p{margin:0;font-size:16px;line-height:1.55;color:#DDD;max-width:52ch}
.kr-sent__rc{border-top:1px solid #333;padding-top:16px;display:flex;gap:28px;flex-wrap:wrap}
.kr-sent__rc div{display:grid;gap:4px}
.kr-sent__rc span{font-size:11px;letter-spacing:.12em;color:#A8A8A8;font-weight:600;text-transform:uppercase}
.kr-sent__rc strong{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:20px}
@media (max-width:767px){.kr-sent{padding:32px 24px}}
.wpcf7 .wpcf7-not-valid-tip{font-family:var(--f-body);font-style:normal;text-transform:none;font-weight:400;font-size:var(--t-sm);color:var(--black);margin-top:4px}
.wpcf7 form .wpcf7-response-output{margin:0;border:1.5px solid var(--black);padding:12px;font-size:var(--t-sm)}
.wpcf7-spinner{display:none}

/* ---------- Custom design inquiry (page template "Inquiry") ---------- */
.kr-inq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.kr-inq__intro{display:grid;gap:var(--s5);align-content:start}
.kr-inq__title{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,6vw,5.25rem);line-height:.86;margin:0;text-wrap:balance}
.kr-inq__intro .prose p{line-height:1.6;color:#333}
.kr-terms{margin:0 0 var(--s4);border-top:1.5px solid var(--black);padding-top:var(--s3);display:grid;gap:var(--s2)}
.kr-terms div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:var(--t-sm);line-height:1.5}
.kr-terms dt{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:13px}
.kr-terms dd{margin:0}
.kr-inq__form .wpcf7 form{gap:22px}
.kr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kr-hint{display:block;margin-top:4px;font-family:var(--f-body);font-style:normal;font-stretch:100%;font-weight:400;text-transform:none;font-size:13px;color:var(--grey);line-height:1.45}
.kr-lbl{display:block;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:16px;margin-bottom:10px}
.kr-sec{display:grid;gap:22px;border-top:1.5px solid var(--black);padding-top:20px}
.kr-sec h3{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;margin:0}
.kr-sec>.kr-hint{margin-top:-14px}
/* picture cards (Logos / Graphics) */
.kr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:16px}
@media (max-width:767px){.kr-cards{grid-template-columns:repeat(2,minmax(0,190px))}} /* phones keep the 2-up size */
.kr-card{position:relative;display:grid;cursor:pointer;background:none}
.kr-card input{position:absolute;opacity:0;pointer-events:none}
.kr-card__img img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.kr-card__label{display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:15px}
.kr-card__label i{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor}
.kr-card:has(input:checked) .kr-card__label i{background:radial-gradient(currentColor 38%,transparent 42%)}
.kr-card:has(input:focus-visible){outline:2px solid var(--black);outline-offset:3px}
.kr-card__desc{display:block;margin-top:6px;font-family:var(--f-body);font-style:normal;font-stretch:100%;font-weight:400;text-transform:none;font-size:13px;line-height:1.45;color:var(--grey)}
.kr-inq__form{display:grid;gap:24px;min-width:0}
/* Contact page fits one desktop screen (footer included) with the short Question form:
   a shorter message box (still resizable) and less empty space under the form. */
.kr-inquiry-page .wpcf7 textarea{height:160px;min-height:120px}
.page.wrap.kr-inquiry-page{padding-bottom:var(--s6)}
/* reCAPTCHA v3: the floating badge is hidden (Google allows this when the notice below is shown
   near the forms). visibility, not display:none, so reCAPTCHA keeps working. */
.grecaptcha-badge{visibility:hidden!important}
.kr-recaptcha-note{font-size:12px;line-height:1.5;color:var(--grey);margin:0}
.kr-recaptcha-note a{color:inherit;text-underline-offset:2px}
/* two choice boxes switching the forms */
.kr-choose{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kr-choose button{display:grid;gap:8px;text-align:left;border:1.5px solid var(--black);background:var(--white);color:var(--black);padding:16px;cursor:pointer;font:inherit}
.kr-choose b{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1}
.kr-choose small{font-size:13px;color:var(--black);line-height:1.4}
.kr-choose button[aria-selected="true"]{background:var(--black);color:var(--white)}
.kr-choose button[aria-selected="true"] small{color:var(--white)}
.kr-choose button:focus-visible{outline:2px solid var(--black);outline-offset:3px}
/* left-side blocks tied to one form: Additional CSS class "kr-for-1" or "kr-for-2" */
/* left side stays put: the Question intro always shows, form-2 blocks never do */
.kr-inq--tabs .kr-for-2{display:none}
.kr-inq:not(.kr-inq--tabs) .kr-for-1{display:none}
.kr-inq__intro .kr-soc{display:flex;flex-wrap:wrap;gap:20px}
.kr-inq__intro .kr-soc,.kr-inq__intro .kr-soc a{color:var(--black)}
.kr-inq__intro .kr-soc a{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:16px;text-decoration:none}
.kr-inq__intro .kr-soc a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
/* package boxes ([kr_pkg]): title + small line, picked box goes black */
.kr-pkg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kr-pkg__box{position:relative;display:flex!important;flex-direction:column;justify-content:space-between;gap:18px;border:1.5px solid var(--black);padding:16px;cursor:pointer;background:var(--white);color:var(--black)}
.kr-pkg__box input{position:absolute;opacity:0;pointer-events:none}
.kr-pkg__t{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05}
.kr-pkg__s{font-family:var(--f-body);font-style:normal;font-stretch:100%;font-weight:400;text-transform:none;font-size:13px;line-height:1.4;color:var(--grey)}
.kr-pkg__box:has(input:checked){background:var(--black);color:var(--white)}
.kr-pkg__box:has(input:checked) .kr-pkg__s{color:var(--white)}
.kr-pkg__box:has(input:focus-visible){outline:2px solid var(--black);outline-offset:3px}
/* "Included in all packages" note */
.kr-incl{display:flex;gap:12px;align-items:flex-start;background:#F2F2F0;border-left:4px solid var(--black);padding:16px 18px}
.kr-incl svg{flex:none;margin-top:2px}
.kr-incl p{margin:0;font-size:14px;line-height:1.55}
.kr-incl strong{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.01em}
.kr-rule{border:0;border-top:1.5px solid var(--black);margin:0}
/* selected scope + submit, in a black bar; text follows what's picked (assets in page-templates/inquiry.php) */
.kr-scope{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--black);color:var(--white);padding:24px 28px}
.kr-scope__txt{display:grid;gap:6px;min-width:0}
.kr-scope__lbl{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#A8A8A8}
.kr-scope__t{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1}
.kr-scope__s{font-size:14px;color:#D9D9D9}
.kr-scope__s:empty{display:none}
.kr-scope__dep{font-size:13px;font-weight:600;color:var(--white);border-top:1px solid #333;padding-top:8px;margin-top:4px}
.kr-scope .wpcf7-submit,.wpcf7 .kr-scope input[type="submit"]{flex:none;justify-self:auto;background:var(--white);color:var(--black);border:1.5px solid var(--white);padding:18px 26px;font-size:18px}
.wpcf7 .kr-scope input[type="submit"]:hover{background:var(--black);color:var(--white)}
.wpcf7 .kr-scope input[type="submit"]:disabled{opacity:.45;cursor:not-allowed}
.wpcf7 .kr-scope input[type="submit"]:disabled:hover{background:var(--white);color:var(--black)}
@media (max-width:767px){.kr-pkg{grid-template-columns:1fr 1fr}.kr-scope{flex-direction:column;align-items:stretch}.wpcf7 .kr-scope input[type="submit"]{width:100%}}
@media (max-width:767px){.kr-inq{grid-template-columns:1fr;gap:36px}.kr-choose b{font-size:19px}.kr-choose button{padding:14px}.kr-two{grid-template-columns:1fr}}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .pill nav{gap:24px}
}

/* ---------- Phones ---------- */
@media (max-width:767px){
  /* same full pill as desktop (logo · links · cart), centered; type and gaps scale with the screen */
  .pill{--pg:clamp(8px,2.8vw,14px);gap:var(--pg);padding:10px clamp(13px,3.9vw,18px)}
  .pill-band{top:calc(env(safe-area-inset-top,0px) + var(--bar) + 30px)}
  .admin-bar .pill-band{top:calc(env(safe-area-inset-top,0px) + 30px)} /* phone admin bar scrolls away */
  .pill nav{gap:var(--pg)}
  .pill a,.pill button{font-size:clamp(0.6875rem,3.46vw,1rem)}
  .pill .logo{margin-right:0}
  .pill .logo .kr-logo-img{height:clamp(11px,3.6vw,17px)}
  .pill .cart-ic svg{width:clamp(17px,5vw,20px);height:clamp(17px,5vw,20px)}
  .mini{--pill-h:46px;top:calc(env(safe-area-inset-top,0px) + 30px + var(--pill-h) + 8px);padding:20px}

  .frame::after{background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 25%,rgba(0,0,0,0) 50%)}
  .m.pre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .list{--row:38px;--rows:5;--mid:2;left:16px;top:auto;bottom:64px;transform:none}
  .list button{font-size:18px}

  /* footer: three columns, two lines each. Left = © name over "All Rights Reserved.";
     middle = Returns over Privacy (when those pages are published); right = Instagram over Site Credit */
  .strip{grid-template-columns:1fr auto 1fr;gap:4px 12px;align-items:baseline;font-size:clamp(0.75rem,3.5vw,0.875rem);padding-top:10px}
  .strip-c{display:contents}
  .strip-dot{display:none}
  .strip-cn{grid-column:1;grid-row:1}
  .strip-lg{display:contents}
  .strip-l{grid-column:3;grid-row:1;justify-self:end}
  .strip-p{grid-column:2;justify-self:center;font-size:clamp(0.65625rem,2.75vw,0.71875rem)}
  .strip-p--1{grid-row:1;align-self:end}
  .strip-p--2{grid-row:2}
  .strip-cr,.strip-r{grid-row:2;font-size:clamp(0.65625rem,2.75vw,0.71875rem);color:var(--grey)}
  .strip-cr{grid-column:1}
  .strip-r{grid-column:3;justify-self:end}
  .strip--page{padding-top:14px}

  .page.wrap{padding-top:calc(env(safe-area-inset-top,0px) + 108px)}
  .home.wrap{padding-left:max(8px, env(safe-area-inset-left,0px));padding-right:max(8px, env(safe-area-inset-right,0px))}
  .pf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-name{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
/* The field you're typing in gets a black bar on its left edge, on every field on the site
   (contact forms, checkout, cart, account, dropdowns). The quantity box gets the bar on its outer box. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="color"]):not(.qty),textarea,select,.select2-selection){transition:box-shadow .12s ease,padding-left .12s ease}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="color"]):not(.qty):focus,textarea:focus,select:focus,.select2-container--focus .select2-selection,.select2-container--open .select2-selection{outline:none!important;border-color:var(--black)!important;box-shadow:inset 5px 0 0 var(--black)!important;padding-left:18px!important}
.woocommerce div.quantity:has(.qty:focus){box-shadow:inset 5px 0 0 var(--black)}
.woocommerce div.quantity .qty:focus-visible{outline:none!important}
/* ...a field marked missing keeps its red border, with a red bar */
.wpcf7 input.wpcf7-not-valid:focus,.wpcf7 textarea.wpcf7-not-valid:focus,.woocommerce-invalid input:focus,.woocommerce-invalid select:focus,.woocommerce-invalid .select2-container--focus .select2-selection{border-color:#D0021B!important;box-shadow:inset 5px 0 0 #D0021B!important}

/* Page-to-page: the browser fades between pages instead of flashing blank, and the pill is kept
   in place across the change, so it never blinks. Plain CSS (View Transitions); browsers without
   it just load pages the normal way. */
@view-transition{navigation:auto}
.pill{view-transition-name:kr-pill}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-old(kr-pill){display:none}
::view-transition-new(kr-pill){animation:none}
::view-transition-group(kr-pill){animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 404: a big 404, centered between the menu and the footer, sized to the screen so it never scrolls */
body.error404{min-height:calc(100dvh - var(--bar));display:flex;flex-direction:column}
body.error404>main{flex:1;display:flex;flex-direction:column}
.kr-404.page.wrap{flex:1;display:flex;min-height:0;padding-bottom:var(--s5)}
.kr-404__in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.kr-404__num,.kr-404__h{font-family:var(--f-head);font-style:var(--head-style);font-stretch:var(--head-width);font-weight:800;text-transform:uppercase;margin:0}
.kr-404__num{font-size:min(36vw,30dvh,300px);line-height:.82;letter-spacing:-.02em}
.kr-404__h{font-size:min(9vw,5.5dvh,44px);line-height:1;margin-top:.25em}
.kr-404__p{margin:14px 0 0;font-size:16px}
.kr-404__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 0}
html:has(body.error404){overscroll-behavior-y:none}

/* ---------- Homepage preloader ("Fill up", see inc/preloader.php) ---------- */
.kr-pre{position:fixed;inset:0;z-index:100000;background:var(--black);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);animation:kr-pre-lift .45s cubic-bezier(.7,0,.3,1) 1.4s forwards}
.kr-pre-seen .kr-pre{display:none}
.kr-pre__mark{display:grid;width:min(60vw,440px)}
.kr-pre__mark svg{grid-area:1/1;display:block;width:100%;height:auto}
.kr-pre__outline{fill:none;stroke:var(--white);stroke-width:4;animation:kr-pre-in .25s ease-out both}
.kr-pre__fill{fill:var(--white);clip-path:inset(100% 0 0 0);animation:kr-pre-fill 1s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes kr-pre-in{from{opacity:0}}
@keyframes kr-pre-fill{to{clip-path:inset(0 0 0 0)}}
@keyframes kr-pre-lift{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes kr-pre-fade{to{opacity:0;visibility:hidden}}
/* the wall waits behind the preloader, then plays its load-in */
.kr-pre-on .m.intro .t{animation-play-state:paused}
@media (max-width:767px){.kr-pre__mark{width:72vw}}
/* reduce motion: the fill still plays (nothing moves across the screen), but the screen fades out
   instead of sliding up */
@media (prefers-reduced-motion:reduce){
  .kr-pre{animation:kr-pre-fade .4s ease 1.4s forwards!important}
  .kr-pre__outline{animation:kr-pre-in .25s ease-out both!important}
  .kr-pre__fill{animation:kr-pre-fill 1s cubic-bezier(.65,0,.35,1) .2s forwards!important}
}