/* ==========================================================================
   Triple Bow Studios / Blackened Shop, Patina Key
   The wood is the only warm thing on the page.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-italic.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;}
@font-face{font-family:'Karla';src:url('../fonts/karla-normal.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Karla';src:url('../fonts/karla-italic.woff2') format('woff2-variations');
  font-weight:200 800;font-style:italic;font-display:swap;}

/* --------------------------------------------------------------- tokens -- */
:root{
  --tbs-bg:#0F1211;
  --tbs-surface:#171B19;
  --tbs-raised:#20241F;
  --tbs-ink:#EDEAE2;
  --tbs-muted:#9AA39C;
  --tbs-accent:#4C8B6F;
  --tbs-accent-bright:#68B08D;
  --tbs-hairline:#2C322E;

  --tbs-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tbs-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;

  --tbs-xs:6px; --tbs-sm:12px; --tbs-md:24px;
  --tbs-lg:56px; --tbs-xl:112px; --tbs-xxl:176px;

  --tbs-gutter:clamp(20px,5vw,72px);
  --tbs-maxw:1360px;

  --tbs-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset -- */
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--tbs-bg);
  color:var(--tbs-ink);
  font-family:var(--tbs-body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--tbs-accent);color:var(--tbs-bg);}

h1,h2,h3,h4,h5,h6,
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--tbs-display);
  font-weight:800;
  font-stretch:112%;
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--tbs-ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.0;}
h2{font-size:clamp(2rem,4.2vw,3.5rem);}
h3{font-size:clamp(1.35rem,2.3vw,1.95rem);letter-spacing:-.01em;}
h4{font-size:1.2rem;font-stretch:108%;letter-spacing:0;}

p{margin:0 0 1.15em;max-width:66ch;}
p:last-child{margin-bottom:0;}

a{color:inherit;text-decoration:none;transition:color .25s var(--tbs-ease);}
strong,b{font-weight:700;}
em,i{font-style:italic;}
img{max-width:100%;height:auto;display:block;}
hr{border:0;border-top:1px solid var(--tbs-hairline);margin:var(--tbs-lg) 0;}

/* ------------------------------------------------------------ utilities -- */
.tbs-shell{max-width:var(--tbs-maxw);margin-inline:auto;padding-inline:var(--tbs-gutter);}

.tbs-eyebrow{
  font-family:var(--tbs-body);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--tbs-muted);
  margin:0 0 var(--tbs-md);display:block;
}
.tbs-spec{
  font-family:var(--tbs-body);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tbs-muted);
  line-height:1.55;margin:0;
}
.tbs-lead{font-size:clamp(1.06rem,1.55vw,1.3rem);line-height:1.6;color:var(--tbs-ink);}
.tbs-quiet{color:var(--tbs-muted);}
.tbs-measure{max-width:62ch;}
.tbs-rule{height:1px;background:var(--tbs-hairline);border:0;width:100%;margin:0;}

/* the mark used as a break on a hairline */
.tbs-break{display:flex;align-items:center;gap:var(--tbs-md);color:var(--tbs-accent);}
.tbs-break::before,.tbs-break::after{content:"";flex:1;height:1px;background:var(--tbs-hairline);}
.tbs-break svg{height:34px;width:auto;display:block;}

/* ---------------------------------------------------------------- mark --- */
.tbs-mark{display:block;width:auto;}
.tbs-mark .tbs-key{fill:currentColor;}
.tbs-mark .tbs-split-open{stroke:var(--tbs-hairline);}
.tbs-mark .tbs-split-over{stroke:var(--tbs-bg);}

.tbs-lockup{display:inline-flex;align-items:center;gap:.72em;font-size:24px;color:var(--tbs-ink);}
.tbs-lockup .tbs-mark{height:2.34em;}
.tbs-wordmark{
  font-family:var(--tbs-display);font-weight:800;font-stretch:118%;
  line-height:.96;letter-spacing:.015em;text-transform:uppercase;
}
.tbs-wordmark span{display:block;}
.tbs-wordmark .l2{
  color:var(--tbs-muted);font-weight:500;font-stretch:112%;
  letter-spacing:.345em;font-size:.5em;margin-top:.18em;
}
.tbs-lockup:hover .tbs-wordmark .l2{color:var(--tbs-accent);transition:color .3s var(--tbs-ease);}

/* -------------------------------------------------------------- buttons -- */
.tbs-btn{
  --_fill:var(--tbs-accent);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--tbs-body);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;
  padding:17px 30px;border:0;border-radius:0;cursor:pointer;
  color:var(--tbs-bg);background:transparent;overflow:hidden;
  isolation:isolate;white-space:nowrap;
  transition:color .3s var(--tbs-ease);
}
.tbs-btn::before{
  content:"";position:absolute;inset:0;background:var(--_fill);z-index:-1;
  transform-origin:bottom;transition:transform .4s var(--tbs-ease),background .3s var(--tbs-ease);
}
.tbs-btn:hover::before{background:var(--tbs-accent-bright);}
.tbs-btn:active{transform:translateY(1px);}

.tbs-btn--ghost{color:var(--tbs-ink);box-shadow:inset 0 0 0 1px var(--tbs-ink);}
.tbs-btn--ghost::before{transform:scaleY(0);background:var(--tbs-ink);}
.tbs-btn--ghost:hover{color:var(--tbs-bg);}
.tbs-btn--ghost:hover::before{transform:scaleY(1);background:var(--tbs-ink);}

.tbs-btn:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--tbs-accent-bright);outline-offset:3px;
}

/* a text link that underlines from the left */
.tbs-link{
  display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:var(--tbs-ink);padding-bottom:6px;position:relative;
}
.tbs-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--tbs-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--tbs-ease);
}
.tbs-link:hover{color:var(--tbs-accent-bright);}
.tbs-link:hover::after{transform:scaleX(1);}

/* ----------------------------------------------------------- work plate -- */
/* A plate is an Elementor container: image widget, heading, then a spec line.
   Styling targets the builder's real output so the widgets stay editable. */
.tbs-plate{display:block;position:relative;}
.tbs-plate .elementor-widget-image{overflow:hidden;background:var(--tbs-surface);display:block;}
.tbs-plate .elementor-widget-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--tbs-ease),filter .6s var(--tbs-ease);
  filter:saturate(.96);
}
.tbs-plate:hover .elementor-widget-image img{transform:scale(1.035);filter:saturate(1.06);}
.tbs-plate .elementor-widget-heading{margin-top:var(--tbs-md) !important;}
.tbs-plate .elementor-heading-title{
  font-family:var(--tbs-display);font-weight:700;font-stretch:106%;
  font-size:1.16rem;letter-spacing:-.005em;line-height:1.2;color:var(--tbs-ink);
  transition:color .3s var(--tbs-ease);
}
.tbs-plate:hover .elementor-heading-title{color:var(--tbs-accent-bright);}
.tbs-plate .elementor-widget-text-editor{margin-top:6px !important;}
.tbs-plate .elementor-widget-text-editor p{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tbs-muted);line-height:1.55;margin:0;
}
/* ---------------------------------------------------------------- forms -- */
.tbs-form{max-width:none;}
.tbs-form .tbs-field{margin-bottom:var(--tbs-md);}
.tbs-form label,.tbs-form .tbs-label{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--tbs-muted);margin-bottom:9px;
}
.tbs-form input[type=text],.tbs-form input[type=email],.tbs-form input[type=tel],
.tbs-form input[type=url],.tbs-form select,.tbs-form textarea,
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 select,.wpcf7 textarea{
  width:100%;background:var(--tbs-raised);color:var(--tbs-ink);
  font-family:var(--tbs-body);font-size:16px;line-height:1.5;
  border:0;border-bottom:1px solid var(--tbs-hairline);border-radius:0;
  padding:15px 16px;appearance:none;
  transition:border-color .3s var(--tbs-ease),background .3s var(--tbs-ease);
}
.tbs-form textarea,.wpcf7 textarea{min-height:150px;resize:vertical;}
.tbs-form input::placeholder,.tbs-form textarea::placeholder,
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:#6E7873;opacity:1;}
.tbs-form input:focus,.tbs-form select:focus,.tbs-form textarea:focus,
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  border-bottom-color:var(--tbs-accent);background:#252A24;outline:none;
}
.tbs-form select,.wpcf7 select{
  background-image:linear-gradient(45deg,transparent 50%,var(--tbs-muted) 50%),
                   linear-gradient(135deg,var(--tbs-muted) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;
}
.tbs-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--tbs-md);}
@media(max-width:720px){.tbs-grid-2{grid-template-columns:1fr;}}

/* Contact Form 7 chrome */
.wpcf7 form .wpcf7-response-output{
  border:0;border-left:2px solid var(--tbs-accent);background:var(--tbs-raised);
  color:var(--tbs-ink);margin:var(--tbs-md) 0 0;padding:14px 18px;font-size:15px;border-radius:0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-left-color:var(--tbs-accent-bright);}
.wpcf7-not-valid-tip{color:var(--tbs-accent-bright);font-size:12px;letter-spacing:.06em;margin-top:7px;}
.wpcf7-spinner{background-color:var(--tbs-accent);}
.wpcf7 .wpcf7-submit{
  font-family:var(--tbs-body);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;padding:17px 30px;border:0;border-radius:0;cursor:pointer;
  color:var(--tbs-bg);background:var(--tbs-accent);
  transition:background .3s var(--tbs-ease);
}
.wpcf7 .wpcf7-submit:hover{background:var(--tbs-accent-bright);}

/* ------------------------------------------------------------- reveals -- */
.tbs-reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--tbs-ease),transform .6s var(--tbs-ease);}
.tbs-reveal.is-in{opacity:1;transform:none;}
.no-js .tbs-reveal,.tbs-no-reveal .tbs-reveal{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .tbs-reveal{opacity:1 !important;transform:none !important;}
}

/* -------------------------------------------------- theme + builder fit -- */
/* Solace and Elementor both ship light defaults; hold the ground dark. */
body,
.site,
#content,
.site-content,
.elementor,
.elementor-section-wrap{background-color:var(--tbs-bg);}

.elementor-widget-text-editor,
.elementor-widget-text-editor p{color:var(--tbs-ink);}

.elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--tbs-maxw);}

/* Elementor headings inherit the display face, not the builder default */
.elementor-heading-title{font-family:var(--tbs-display);}

/* kill the theme's rounded corners wholesale: fine joinery is square */
.elementor-button,.elementor-field,.elementor-widget-image img,
input,textarea,select,button,.elementor-widget-container>*{border-radius:0 !important;}

/* Solace page title bar is not wanted, pages carry their own hero */
.nv-page-title-wrap,.nv-title-nav-wrap,.entry-header.nv-page-title{display:none !important;}

/* ------------------------------------------------------------- a11y ----- */
.tbs-skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--tbs-accent);color:var(--tbs-bg);padding:12px 20px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
}
.tbs-skip:focus{left:12px;top:12px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}