/*
Theme Name: That Blind Guy
Theme URI: https://thatblindguy.co
Author: Built for Karan Nagrani
Description: Accessible, fast theme for thatblindguy.co. Zero WCAG 2.1/2.2 A and AA violations at build time.
Version: 4.11
License: GNU General Public License v2 or later
Text Domain: thatblindguy
*/

:root{
  --ink:#16130E;
  --ink-soft:#4A423A;
  --paper:#F2EFE5;
  --surface:#E9E3D4;
  --surface-2:#DCD4C0;
  --signal:#FFC91C;
  --signal-ink:#6E4A00;
  --rule:#CFC7B4;
  --focus:#0A58CA;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,Arial,sans-serif;
  --measure:64ch;
  --night:#16130E;
  --night-text:#F7F4EC;
  --night-soft:#C4BBAA;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F4F0E6;
    --ink-soft:#B3AA9B;
    --paper:#0E0C09;
    --surface:#1B1712;
    --surface-2:#262018;
    --signal:#FFC91C;
    --signal-ink:#FFD75A;
    --rule:#3A3228;
    --focus:#8AB4F8;
  }
}
:root[data-theme="dark"]{
  --ink:#F4F0E6;
  --ink-soft:#B3AA9B;
  --paper:#0E0C09;
  --surface:#1B1712;
  --surface-2:#262018;
  --signal:#FFC91C;
  --signal-ink:#FFD75A;
  --rule:#3A3228;
  --focus:#8AB4F8;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}

a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:1px;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--signal);color:#16130E;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 20px;text-decoration:none;font-weight:600;
}
.skip:focus{left:0;position:fixed;top:env(safe-area-inset-top,0px)}


/* ---------- header ---------- */
header.site{
  border-bottom:1px solid var(--rule);
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--paper);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:inline-block;line-height:0}
.brand img{height:40px;width:auto;display:block}
.hero-logo{margin:0 0 22px;line-height:0}
.hero-logo img{width:min(320px,74%);height:auto;display:block}
.foot-logo img{width:190px;height:auto;display:block;margin-bottom:12px}
nav.main ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap}
nav.main a{
  font-family:var(--display);font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;padding-block:9px;
  display:inline-block;min-height:24px;border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--signal)}
.btn{
  display:inline-block;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
}
.btn:hover{background:var(--signal);color:#16130E;border-color:var(--signal)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.small{padding:9px 16px;font-size:12px}

/* ---------- hero ---------- */
.hero{background:var(--signal);color:#16130E;border-bottom:3px solid #16130E}
.hero .wrap{padding-block:56px 44px;display:grid;gap:34px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end}
.eyebrow{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 112;
  font-size:clamp(46px,9vw,104px);line-height:.92;letter-spacing:-.035em;
  margin:0 0 6px;text-transform:uppercase;text-wrap:balance;
}
.hero .sub{
  font-family:var(--display);font-weight:700;font-size:clamp(17px,2.4vw,23px);
  letter-spacing:.02em;margin:0 0 22px;text-transform:uppercase;
}
.hero p.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.45;margin:0 0 28px;max-width:34ch}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{border-color:#16130E;background:#16130E;color:#FFC91C}
.hero .btn:hover{background:var(--paper);color:#16130E}
.hero .btn.ghost{background:transparent;color:#16130E}
.hero .btn.ghost:hover{background:#16130E;color:#FFC91C}


.facts{border-top:2px solid var(--night);background:var(--night);color:var(--night-text)}
.facts .wrap{display:flex;gap:10px 34px;flex-wrap:wrap;padding-block:15px;
  font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.facts span::before{content:"▸ ";color:var(--signal)}

/* ---------- sections ---------- */
section{border-bottom:1px solid var(--rule);scroll-margin-top:96px}
section > .wrap{padding-block:72px}
.sec-head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:34px;margin-bottom:44px}
.sec-label{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-ink);padding-top:10px;
  border-top:3px solid var(--signal);align-self:start;
}
h2{
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 108;
  font-size:clamp(30px,4.6vw,50px);line-height:1;letter-spacing:-.03em;
  margin:0 0 14px;text-transform:uppercase;text-wrap:balance;
}
.sec-head p{margin:0;font-size:19px;line-height:1.5;max-width:var(--measure);color:var(--ink-soft)}
h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.015em;margin:0 0 8px;line-height:1.15}
p{max-width:var(--measure)}

/* clients */
.clients{display:flex;flex-wrap:wrap;gap:0}
.clients li{
  list-style:none;font-family:var(--display);font-weight:800;font-size:clamp(15px,2vw,20px);
  text-transform:uppercase;letter-spacing:-.01em;padding:14px 26px 14px 0;margin-right:26px;
  border-bottom:1px solid var(--rule);flex:1 1 auto;white-space:nowrap;
}
.clients{padding:0;margin:0}

/* topics */
.topics{display:grid;gap:0;margin-top:8px}
.topic{
  display:grid;grid-template-columns:200px minmax(0,1fr) 240px;gap:34px;
  padding-block:30px;border-top:1px solid var(--rule);align-items:start;
}
.topic:last-child{border-bottom:1px solid var(--rule)}
.topic .who{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-ink);padding-top:4px}
.topic p{margin:0;font-size:16.5px}
.topic .evidence{
  font-family:var(--display);font-size:12px;line-height:1.7;color:var(--ink-soft);
  border-left:3px solid var(--signal);padding-left:14px;
}
.topic .evidence b{display:block;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:5px;font-size:11px}

.formats{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.formats span{
  font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule);padding:9px 14px;background:var(--surface);
}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.quote{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.quote blockquote{margin:0;font-size:16px;line-height:1.55}
.quote cite{
  font-family:var(--display);font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-top:auto;
  padding-top:12px;border-top:2px solid var(--signal);
}

/* comedy */
.comedy{background:var(--night);color:var(--night-text)}
.comedy .sec-label{color:var(--signal);border-top-color:var(--signal)}
.comedy .sec-head p,.comedy p{color:var(--night-soft)}
.comedy h2{color:var(--night-text)}
.comedy .warn{
  font-family:var(--display);font-size:13px;letter-spacing:.05em;
  background:var(--signal);color:#16130E;display:inline-block;padding:10px 16px;font-weight:600;
}
.comedy .photo-slot{border-color:var(--signal);background:rgba(255,201,28,.08);color:var(--night-text)}
.comedy .btn{border-color:var(--signal);background:var(--signal);color:var(--night)}
.comedy .btn:hover{background:transparent;color:var(--signal)}
.comedy .reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:22px;margin-top:34px}
.comedy .reviews div{border-top:2px solid var(--signal);padding-top:14px}
.comedy .reviews p{font-size:15.5px;margin:0 0 10px}
.comedy .reviews span{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.stars{color:var(--signal);letter-spacing:.1em;font-size:13px}

/* press */
.press{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:0 40px}
.press a{
  display:block;padding:13px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;font-size:16px;line-height:1.35;
}
.press a:hover{background:var(--surface)}
.press a .src{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:3px}

/* shop */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:10px}
.shopcard{border:1px solid var(--rule);padding:18px;background:var(--surface)}
.shopcard .slot{border:2px dashed var(--ink-soft);aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:12px;margin-bottom:14px}
.shopcard h3{font-size:17px}
.shopcard p{font-size:14.5px;margin:0;color:var(--ink-soft)}

/* form */
.book{background:var(--surface)}
.form-grid{display:grid;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;max-width:760px}
.field{min-width:0;display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.hint{font-family:var(--display);font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em}
input,select,textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink-soft);padding:12px 13px;width:100%;
}
textarea{min-height:130px;resize:vertical}
.contact-aside{font-family:var(--display);font-size:13px;line-height:2}
.contact-aside a{color:var(--signal-ink);font-weight:600}

/* footer */
footer.site{background:var(--night);color:var(--night-soft);font-family:var(--display);font-size:13px}
footer.site .wrap{padding-block:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px}
footer.site h2,footer.site h3{color:var(--signal);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0;line-height:2}
footer.site a{color:var(--night-text)}



/* real photos */
.hero-photo{margin:0;display:flex;flex-direction:column;gap:10px}
.hero-photo img{width:100%;height:auto;display:block;border:3px solid #16130E;background:var(--paper)}
.hero-photo figcaption{font-family:var(--display);font-size:11.5px;line-height:1.5;opacity:.8}
.about-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.about-grid figure{margin:0}
.about-grid img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.about-grid figcaption{font-family:var(--display);font-size:11.5px;line-height:1.5;color:var(--ink-soft);margin-top:8px}

/* products */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(228px,100%),1fr));gap:26px}
.prod{display:flex;flex-direction:column;gap:11px;text-decoration:none}
.prod .shot{background:var(--surface);border:1px solid var(--rule);aspect-ratio:3/4;overflow:hidden;display:block}
.prod .shot img{width:100%;height:100%;object-fit:cover;display:block}
.prod:hover .shot{border-color:var(--ink)}
.prod h3{font-size:17px;margin:0}
.prod .desc{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:none}
.prod .meta{font-family:var(--display);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--signal-ink);margin-top:auto;padding-top:6px}
.booklayout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
.shopnote{border-left:3px solid var(--signal);padding:14px 0 14px 16px;margin:34px 0 0;font-family:var(--display);font-size:13px;line-height:1.7;max-width:none}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:26px}}

/* gallery */
.gallery{columns:4 220px;column-gap:14px}
.gallery figure{margin:0 0 14px;break-inside:avoid;position:relative}
.gallery img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--surface)}
.gallery figcaption{
  font-family:var(--display);font-size:11.5px;font-weight:500;line-height:1.45;
  color:var(--ink-soft);padding:7px 2px 0;
}
.galnote{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-ink);margin:0 0 20px;max-width:none}

/* instagram */
.insta{background:var(--surface)}
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;list-style:none;margin:0;padding:0}
.igrid li{margin:0;min-width:0}
.igrid a{display:block;line-height:0;border:1px solid var(--rule);background:var(--paper);position:relative}
.igrid a:hover{border-color:var(--ink)}
.igrid img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.igrid:not(.iglive) img{aspect-ratio:3/4}
/* Smash Balloon feed: match the site, keep contrast accessible */
#sb_instagram{padding-bottom:0!important}
#sb_instagram .sbi_header_text,#sb_instagram #sbi_load,#sb_instagram .sbi_follow_btn{display:none!important}
#sb_instagram #sbi_images{padding:0!important}
/* Show the most recent 8 only — keeps the section a sensible height */
#sb_instagram #sbi_images .sbi_item:nth-child(n+9){display:none!important}
@media(max-width:700px){#sb_instagram #sbi_images .sbi_item:nth-child(n+7){display:none!important}}
#sb_instagram .sbi_photo_wrap,#sb_instagram .sbi_photo{border:1px solid var(--rule)}
#sb_instagram a,#sb_instagram a span{color:var(--ink)!important}
.shop-intro{max-width:70ch;margin:24px 0 0}
.shop-intro p{margin:0 0 14px}
.shop-cta{border-top:1px solid var(--rule);padding-top:22px;margin-top:10px;max-width:70ch}
.shop-cta .btn{margin-left:8px}
.shopx .wrap{padding-top:0}
/* ---- WooCommerce: match the site, keep it accessible ---- */
.shop .woocommerce-notices-wrapper:empty{display:none}
/* WooCommerce ships clearfix pseudo-elements on the product list. In a grid
   container they become grid items and eat the first and last cells, which
   leaves a hole at the top-left of the shop. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:28px;list-style:none;margin:34px 0 0;padding:0}
.woocommerce ul.products li.product{margin:0;min-width:0;text-align:left;width:auto!important;float:none!important}
.woocommerce ul.products li.product a img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule);margin:0 0 12px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:18px;line-height:1.3;margin:0 0 4px;padding:0}
.woocommerce ul.products li.product .price{font-size:16px;color:var(--ink);font-weight:600}
.woocommerce ul.products li.product a:focus-visible img{outline:3px solid var(--ink);outline-offset:3px}
.woocommerce div.product{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;margin-top:34px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important;min-width:0}
.woocommerce div.product div.images img{border:1px solid var(--rule)}
.woocommerce div.product .product_title{margin:0 0 10px}
.woocommerce div.product p.price{font-size:24px;color:var(--ink);margin:0 0 18px}
.woocommerce div.product form.cart{margin:18px 0}
.woocommerce .quantity input[type=number],.woocommerce form .form-row input,.woocommerce form .form-row select,.woocommerce form .form-row textarea{border:1px solid var(--rule);padding:10px;font:inherit;background:var(--paper);color:var(--ink)}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;font:inherit;font-weight:600;padding:13px 22px;text-transform:none}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--paper);color:var(--ink)}
.woocommerce .button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* WooCommerce colours prices olive green (#958e09, 3.35:1). */
.woocommerce div.product p.price,.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price,.woocommerce div.product .woocommerce-variation-price .price bdi{color:var(--ink)}
/* Add to cart before a colour and size are picked. WooCommerce greys it to
   pale purple at 50% opacity (2.1:1). Keep it readable: it is the one control
   on the page a low-vision customer is looking for. */
.woocommerce button.button.alt.disabled,.woocommerce button.button.alt:disabled,.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.disabled,.woocommerce button.button:disabled,.woocommerce a.button.alt.disabled,.woocommerce a.button.disabled,
.woocommerce button.button.alt.disabled:hover,.woocommerce button.button.alt:disabled:hover,.woocommerce a.button.alt.disabled:hover{
  background:var(--ink-soft);color:var(--paper);border-color:var(--ink-soft);opacity:1;cursor:not-allowed}
.woocommerce table.shop_table,.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--rule)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--ink);background:var(--paper);color:var(--ink)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ink)}
.woocommerce .woocommerce-breadcrumb{font-size:14px;margin:0 0 18px}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{font-size:14px}
.tbg-ship{border:1px solid var(--rule);background:var(--paper);padding:12px 14px;margin:18px 0;font-size:15px;line-height:1.5}
.tbg-ship a{text-decoration:underline}
.igplay{position:absolute;right:10px;bottom:10px;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.igcap{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--signal-ink);margin:22px 0 0;max-width:none}
@media (max-width:880px){.gallery{columns:2 140px;column-gap:10px}}

@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;padding-block:40px 34px}
  .sec-head{grid-template-columns:1fr;gap:14px}
  .topic{grid-template-columns:1fr;gap:16px}
  section > .wrap{padding-block:52px}
  .clients li{white-space:normal;flex:1 1 100%;margin-right:0}
  .booklayout{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}


/* ------------------------------------------------- 4.9 (8 Nov 2026): alignment + stand-up fixes */
/* Body copy, sub-headings and buttons line up under the section heading column (desktop only). */
@media (min-width:881px){
  section .wrap > p,
  section .wrap > h3,
  section .wrap > .cta-row,
  section.comedy .wrap > h2{margin-left:234px !important}
}
/* Page-title h1s inside a section head get the same display face as h2s. */
.sec-head h1{
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 108;
  font-size:clamp(30px,4.6vw,50px);line-height:1;letter-spacing:-.03em;
  margin:0 0 14px;text-transform:uppercase;text-wrap:balance;
}
.comedy h1{color:var(--night-text)}
/* Tour-date dates readable on the dark comedy background. */
.comedy .who{color:var(--signal)}
/* Tour-dates list hidden on the comedy page: the Next show block covers it; Event schema still output. */
.comedy .wrap > h2:has(+ .topics),
.comedy .wrap > h2:has(+ .topics) + .topics{display:none}

/* Accessibility fixes 9 Nov 2026 */
@media (max-width:880px){ .sec-head{grid-template-columns:minmax(0,1fr)} .sec-head h1, .sec-head h2{overflow-wrap:anywhere} }
.a11y-list{padding-left:1.2em;margin-top:0;max-width:62ch}
.a11y-list li{margin:0 0 .5em}
@media (min-width:881px){ section .wrap > ul.a11y-list{margin-left:234px !important} }