/* ============================================================
   THENTHULLI - SITE CSS
   Loaded by wp-content/novamira-sandbox/thenthulli-brand-css.php
   Lives outside the theme, so Blocksy updates cannot touch it.

     1. Tokens          - aliased to the Blocksy palette
     2. Hexagon cards   - flip component
     3. Trust badges
     4. Divider         - the hex rule
     5. Buttons         - four levels + Woo/Elementor overrides

   Colours come from the saved Blocksy palette via
   --theme-palette-color-N. Change a colour in Customise > Colors
   and everything here follows. Only two values are hard-coded,
   both derived, both noted where they appear.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */

:root{
  --tt-gold-lt : var(--theme-palette-color-1, #D4A24A); /* gradient top          */
  --tt-gold    : var(--theme-palette-color-2, #B07A28); /* buttons, icons, rules */
  --tt-brown   : var(--theme-palette-color-3, #533A0B); /* headings + footer     */
  --tt-ink     : var(--theme-palette-color-4, #2C2C2C); /* body text             */
  --tt-cream   : var(--theme-palette-color-5, #FAF3E3); /* section backgrounds   */
  --tt-green   : var(--theme-palette-color-6, #2E5E3A); /* accent                */
  --tt-gold-hi : var(--theme-palette-color-7, #F5D76E); /* hover on brown        */
  --tt-white   : var(--theme-palette-color-8, #FFF8E7); /* text on brown         */
  --tt-gold-mid: #8F5F0E;   /* derived - the accessible gold. 4.98:1 on cream, so it is
                               the only gold that passes AA for small text. Palette 2
                               (#B07A28) manages just 3.36:1 and must not be used below 18px. */
  --tt-deep    : #3A2707;   /* derived: shade of brown, card backs */
  --tt-line    : #E7D6A6;   /* derived: tint of gold, hairlines    */
  --tt-ease    : cubic-bezier(.4,.2,.2,1);
}

/* ---------- 2. HEXAGON FLIP CARDS ------------------------- */

.tt-hexgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px;margin:30px 0 0}
.tt-hex{width:196px;height:222px;perspective:1000px;text-decoration:none;display:block}
.tt-hi{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--tt-ease)}
.tt-hex:hover .tt-hi,
.tt-hex:focus-visible .tt-hi,
.tt-hex.is-flipped .tt-hi{transform:rotateY(180deg)}
.tt-hf{position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:15%;box-sizing:border-box}
.tt-ff{background:linear-gradient(160deg,var(--tt-gold-lt),var(--tt-gold))}
.tt-fb{background:linear-gradient(160deg,#6B4A10,var(--tt-deep));transform:rotateY(180deg)}
.tt-ff svg{width:31px;height:31px;margin-bottom:10px;stroke:var(--tt-brown);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tt-ff b{font-size:14px;line-height:1.3;color:var(--tt-brown);font-weight:700}
.tt-fb p{font-size:11.5px;line-height:1.55;color:var(--tt-white);margin:0 0 10px}
.tt-fb span{font-size:11px;letter-spacing:.08em;color:var(--tt-gold-hi);
  font-weight:700;text-transform:uppercase}
@media(max-width:900px){.tt-hex{width:158px;height:180px}}
@media(max-width:520px){.tt-hex{width:45%;height:auto;aspect-ratio:196/222}}

/* Photo-backed step cards - "From hive to jar" */
.tt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 0}
.tt-step{perspective:1200px;aspect-ratio:16/10}
.tt-si{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--tt-ease)}
.tt-step:hover .tt-si,.tt-step.is-flipped .tt-si{transform:rotateY(180deg)}
.tt-sf{position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding:24px;box-sizing:border-box}
.tt-sa{background:var(--tt-white);border:1px solid var(--tt-line);
  box-shadow:0 2px 12px rgba(83,58,11,.10)}
.tt-sa i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:linear-gradient(160deg,var(--tt-gold-lt),var(--tt-gold));
  color:var(--tt-brown);font-style:normal;font-weight:800;font-size:14px;margin-bottom:13px}
.tt-sa b{font-size:15px;line-height:1.45;color:var(--tt-brown);font-weight:600}
.tt-sb{transform:rotateY(180deg);background-size:cover;background-position:center;
  background-color:var(--tt-brown);justify-content:flex-end;padding:0}
.tt-sb em{display:block;font-style:normal;color:var(--tt-white);
  font-size:13px;line-height:1.5;padding:40px 18px 16px;
  background:linear-gradient(to top,rgba(44,29,6,.94),rgba(44,29,6,.15) 70%,rgba(44,29,6,0))}
@media(max-width:900px){.tt-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tt-steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tt-hi,.tt-si{transition:none}}

/* ---------- 3. TRUST BADGES ------------------------------- */

.tt-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tt-badge{display:inline-flex;align-items:center;gap:7px;
  background:var(--tt-cream);border:1px solid var(--tt-line);border-radius:999px;
  padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--tt-brown);line-height:1}
.tt-badge svg{width:14px;height:14px;stroke:var(--tt-gold);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.tt-badge--onDark{background:rgba(255,248,231,.08);border-color:rgba(245,215,110,.35);
  color:var(--tt-white)}
.tt-badge--onDark svg{stroke:var(--tt-gold-hi)}

/* ---------- 4. DIVIDER ------------------------------------ */

.tt-rule{display:flex;align-items:center;gap:14px;margin:40px 0;color:var(--tt-gold)}
.tt-rule::before,.tt-rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--tt-line),transparent)}
.tt-rule svg{width:17px;height:17px;stroke:var(--tt-gold);fill:none;
  stroke-width:1.4;flex:0 0 auto}
.tt-rule--onDark{color:var(--tt-gold-hi)}
.tt-rule--onDark svg{stroke:var(--tt-gold-hi)}
.tt-rule--onDark::before,.tt-rule--onDark::after{
  background:linear-gradient(to right,transparent,rgba(245,215,110,.4),transparent)}
/* ---------- 5. BUTTONS ------------------------------------ */

.tt-btn{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;line-height:1;letter-spacing:.03em;
  padding:15px 30px;border-radius:4px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--tt-ease),box-shadow .22s var(--tt-ease),
             background-color .22s var(--tt-ease),color .22s var(--tt-ease)}
.tt-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-btn:focus-visible{outline:2px solid var(--tt-gold);outline-offset:3px}
.tt-btn--primary{background:linear-gradient(160deg,var(--tt-gold-lt),var(--tt-gold));
  color:var(--tt-white);box-shadow:0 2px 10px rgba(176,122,40,.30)}
.tt-btn--primary:hover{transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(176,122,40,.40);color:var(--tt-white)}
.tt-btn--secondary{background:transparent;color:var(--tt-brown);border-color:var(--tt-gold)}
.tt-btn--secondary:hover{background:var(--tt-gold);color:var(--tt-white)}
.tt-btn--ghost{background:transparent;color:var(--tt-brown);padding-left:0;padding-right:0}
.tt-btn--ghost:hover{color:var(--tt-gold)}
.tt-btn--dark{background:var(--tt-deep);color:var(--tt-white)}
.tt-btn--dark:hover{background:var(--tt-brown);color:var(--tt-white)}
.tt-btn--onDark{background:linear-gradient(160deg,var(--tt-gold-lt),var(--tt-gold));
  color:var(--tt-deep)}
.tt-btn--onDark:hover{transform:translateY(-2px);color:var(--tt-deep)}
.tt-btn--outlineLight{background:transparent;color:var(--tt-white);
  border-color:rgba(245,215,110,.55)}
.tt-btn--outlineLight:hover{background:var(--tt-white);color:var(--tt-deep)}
.tt-btn--sm{padding:10px 20px;font-size:12.5px}
.tt-btn--lg{padding:18px 40px;font-size:15px}

/* Native theme, Elementor and WooCommerce buttons, so nobody has
   to remember to add a class.                                    */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:linear-gradient(160deg,var(--tt-gold-lt),var(--tt-gold));
  color:var(--tt-white);
  border:1.5px solid transparent;border-radius:4px;
  padding:15px 30px;font-size:14px;font-weight:600;letter-spacing:.03em;line-height:1;
  box-shadow:0 2px 10px rgba(176,122,40,.30);
  transition:transform .22s var(--tt-ease),box-shadow .22s var(--tt-ease)}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(176,122,40,.40);
  color:var(--tt-white)}

/* "View cart" should not shout as loudly as the buy button. */
.woocommerce a.added_to_cart{
  background:transparent;color:var(--tt-brown);border:1.5px solid var(--tt-gold);
  border-radius:4px;padding:13px 26px;font-size:13px;font-weight:600;
  box-shadow:none;margin-left:8px}
.woocommerce a.added_to_cart:hover{background:var(--tt-gold);color:var(--tt-white)}

/* ---------- 6. FOOTER ------------------------------------- */
/* Blocksy footer widget columns. Fixes the loose, uneven spacing:
   columns now share a top edge, headings and lists get one rhythm,
   and the block-editor gap between blocks is replaced with real,
   consistent margins.                                            */

.ct-footer [data-row="middle"] > .ct-container{align-items:start}

.ct-footer .ct-widget > :first-child{margin-top:0}
.ct-footer .ct-widget > :last-child{margin-bottom:0}

.ct-footer .ct-widget .wp-block-heading{
  margin:0 0 16px;font-size:15px;line-height:1.3;letter-spacing:.02em}

.ct-footer .ct-widget .wp-block-list{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.ct-footer .ct-widget .wp-block-list li{margin:0;padding:0;line-height:1.4}
.ct-footer .ct-widget .wp-block-list li::marker{content:none}

.ct-footer .ct-widget p{margin:0 0 14px;line-height:1.7;max-width:34em}
.ct-footer .ct-widget p:last-child{margin-bottom:0}
.ct-footer .ct-widget p br{line-height:2.2}

.ct-footer .ct-widget .wp-block-image{margin:0 0 18px;line-height:0}
.ct-footer .ct-widget figure{margin:0 0 18px}

.ct-footer .ct-widget .wp-block-social-links{
  margin:18px 0 0;padding:0;gap:9px}
.ct-footer .ct-widget .wp-block-social-links li{margin:0}

/* Copyright row: stop it sitting flush against the columns above */
.ct-footer [data-row="bottom"]{padding-top:6px}
.ct-footer [data-row="bottom"] .ct-container{align-items:center}

@media(max-width:999px){
  .ct-footer .ct-widget{margin-bottom:34px}
  .ct-footer .ct-widget:last-child{margin-bottom:0}
}

.ct-footer .ct-widget p.tt-foot-note{font-size:12.5px;line-height:1.6;opacity:.72;margin-top:14px;max-width:30em}

/* ---------- 7. BREADCRUMB & RETURN NAV --------------------- */
/* Rendered by thenthulli-navigation.php. Colours live here, not
   in the PHP, so the palette stays the single source of truth. */

.th-breadcrumbs{background:var(--tt-cream);border-bottom:1px solid rgba(83,58,11,.08)}
.th-breadcrumbs__inner{max-width:1290px;margin:0 auto;padding:10px 20px;font-size:13px;letter-spacing:.02em;color:var(--tt-brown)}
.th-breadcrumbs a{color:var(--tt-gold);text-decoration:none;font-weight:600}
.th-breadcrumbs a:hover{color:var(--tt-brown);text-decoration:underline}
.th-breadcrumbs i{color:var(--tt-gold);font-style:normal;padding:0 2px}
.th-return-nav{background:var(--tt-cream)}
.th-return-nav__inner{max-width:1290px;margin:0 auto;padding:34px 20px 42px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.th-return-nav .tt-btn{text-decoration:none}
@media(max-width:520px){.th-return-nav__inner{padding:26px 20px 32px}}

/* ---------- 8. ARCHIVE HERO -------------------------------- */
/* Blocksy's stock background for a type-2 hero is palette slot 6.
   Slot 6 here is the green accent, so shop-category and author
   archives rendered green with dark text on them - about 1.4:1,
   effectively unreadable.

   Now the same warm band used on the homepage for "Explore the
   hive" and "From hive to jar". Reuse, not a new colour. Brown
   stays reserved for the footer, so the footer keeps reading as
   the end of the page. Brown on the band measures 8.2:1.

   Blocksy's own rule is [data-prefix="..."] .hero-section[...],
   which outranks a bare .hero-section selector, so these match
   that specificity and use !important on the colours only.      */

:root{
  --tt-band-a:#FDF7E3;   /* derived: lightest cream, band top    */
  --tt-band-b:#F4E2A0;   /* derived: gold tint, band bottom      */
}

[data-prefix] .hero-section[data-type="type-2"],
.hero-section[data-type="type-2"]{
  background-color:var(--tt-band-a) !important;
  background-image:linear-gradient(165deg,var(--tt-band-a),var(--tt-band-b)) !important}

[data-prefix] .hero-section[data-type="type-2"] .entry-header .page-title,
[data-prefix] .hero-section[data-type="type-2"] .page-title,
.hero-section[data-type="type-2"] .page-title{color:var(--tt-brown) !important}

[data-prefix] .hero-section[data-type="type-2"] .entry-header .page-description,
[data-prefix] .hero-section[data-type="type-2"] .page-description,
[data-prefix] .hero-section[data-type="type-2"] .entry-header p,
.hero-section[data-type="type-2"] .page-description{
  color:var(--tt-brown) !important;opacity:.88;
  max-width:62ch;margin-left:auto;margin-right:auto}

[data-prefix] .hero-section[data-type="type-2"] a{color:var(--tt-gold) !important}
[data-prefix] .hero-section[data-type="type-2"] a:hover{color:var(--tt-brown) !important}

/* Breadcrumb sits directly above the hero - keep them touching */
.th-breadcrumbs{margin-bottom:0}

/* Woo notices: default is a cold grey-blue box on a warm page.
   White, not cream, so it reads as a card against the cream body. */
.woocommerce-info,.woocommerce-message{
  background:#FFFFFF;border-top:3px solid var(--tt-gold);
  color:var(--tt-brown);border-radius:6px}
.woocommerce-info::before,.woocommerce-message::before{color:var(--tt-gold)}

/* ---------- 9. COMB CHAIN ---------------------------------- */
/* Staggered honeycomb with gold arrows carrying 1 -> 6.
   Front: motif + short label. Back: full sentence, and a photo
   when one exists - add style="--tt-img:url(...)" to the
   .tt-cm__b element and nothing else changes.                  */

.tt-comb{position:relative;left:50%;transform:translateX(-50%);width:min(1250px,calc(100vw - 40px));display:flex;align-items:center;justify-content:center;
  gap:2px;flex-wrap:wrap;margin:34px 0 0;padding:30px 0}
.tt-comb__cell{display:flex;align-items:center}
.tt-comb__arw{width:26px;height:26px;flex:0 0 auto;stroke:var(--tt-gold);
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}

.tt-cm{width:152px;height:174px;perspective:900px;display:block;text-decoration:none}
/* true comb stagger: hexes 1,3,5 lift, hexes 2,4,6 drop */
.tt-comb__cell:nth-child(4n+1) .tt-cm{transform:translateY(-26px)}
.tt-comb__cell:nth-child(4n+3) .tt-cm{transform:translateY(26px)}

.tt-cm__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .65s var(--tt-ease)}
.tt-cm:hover .tt-cm__in,.tt-cm:focus-visible .tt-cm__in,
.tt-cm.is-flipped .tt-cm__in{transform:rotateY(180deg)}

.tt-cm__f{position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20% 14%;box-sizing:border-box}

.tt-cm__a{background:var(--tt-white);box-shadow:inset 0 0 0 1px rgba(176,122,40,.18)}
.tt-cm__a svg{width:27px;height:27px;stroke:var(--tt-gold);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px}
.tt-cm__a b{font-size:13px;line-height:1.3;color:var(--tt-brown);font-weight:700}
.tt-cm__a u{position:absolute;top:18%;text-decoration:none;
  font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--tt-gold);opacity:.8}

.tt-cm__b{transform:rotateY(180deg);background-color:var(--tt-deep);
  background-image:var(--tt-img,linear-gradient(160deg,#6B4A10,var(--tt-deep)));
  background-size:cover;background-position:center}
.tt-cm__b::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,19,3,.38),rgba(30,19,3,.10))}
.tt-cm__b em{position:relative;z-index:1;font-style:normal;
  font-size:11px;line-height:1.5;color:var(--tt-white);text-shadow:0 1px 2px rgba(20,12,2,1),0 0 6px rgba(20,12,2,.95),0 0 14px rgba(20,12,2,.7)}

@media(max-width:1240px){
  .tt-comb{gap:10px;padding:10px 0}
  .tt-comb__arw{display:none}
  .tt-comb__cell:nth-child(4n+1) .tt-cm,
  .tt-comb__cell:nth-child(4n+3) .tt-cm{transform:none}
}
@media(max-width:520px){
  .tt-cm{width:136px;height:156px}
  .tt-cm__a b{font-size:12px}
}


/* 10. Motif images -------------------------------------------------
   The generated motifs carry a baked-in gold fill and cannot inherit
   currentColor. On cream that is low contrast, so a filter deepens the
   gold toward bronze. On dark grounds they are left alone. */
.tt-cm__a img{width:30px;height:30px;margin-bottom:9px;display:block;
  filter:brightness(.72) saturate(1.28) contrast(1.12)}
.tt-badge img{width:16px;height:16px;flex:0 0 auto;
  filter:brightness(.74) saturate(1.25) contrast(1.1)}
.tt-badge--onDark img{filter:none}
.tt-fb img,.tt-cm__b img{filter:none}

.tt-fb__ico{width:26px;height:26px;display:block;margin:0 0 10px;opacity:.95;filter:none}

.tt-ff__ico{width:30px;height:30px;display:block;margin:0 0 11px;
  filter:brightness(.5) saturate(1.3) contrast(1.15)}

@media(max-width:1059px) and (min-width:660px){
  .tt-hexgrid{max-width:640px;margin-left:auto;margin-right:auto}
}




/* === 11. Section-heading motifs ===
   Option C: no container. The motif sits bare with a hairline fading out either
   side. Dropping the hexagon frame gives the artwork roughly 40% more area at
   the same overall footprint - the frame was reading louder than the motif.
   Motifs stay in full colour: they are 12-18 path gradient illustrations, and
   masking them to one colour collapses the interior detail into a silhouette.  */
.tt-hx{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 8px}
.tt-hx--l{justify-content:flex-start}
.tt-hx__r{display:block;height:1px;width:58px;flex:0 0 auto}
.tt-hx__r--a{background:linear-gradient(90deg,transparent,var(--tt-line))}
.tt-hx__r--b{background:linear-gradient(270deg,transparent,var(--tt-line))}
.tt-hx__m{display:block;width:38px;height:38px;flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(83,58,11,.20))}
.tt-hx--sm .tt-hx__m{width:34px;height:34px}
@media(max-width:782px){
.tt-hx{gap:11px}
.tt-hx__r{width:42px}
.tt-hx__m{width:34px;height:34px}
.tt-hx--sm .tt-hx__m{width:30px;height:30px}
}

/* === 12. Comment form ===
   Brings the WordPress reply form into line with the reply card on the static
   site. Markup comes from novamira-sandbox/thenthulli-comments.php; everything
   visual is here. A few declarations carry !important because Blocksy styles
   input[type=submit] and form controls at a higher specificity than a plain
   class - without it the button reverts to the theme's own pill.  */
.tt-replybox{background:#fff;border:1px solid rgba(143,95,14,.18);border-radius:14px;
  padding:30px 30px 26px;box-shadow:0 6px 18px rgba(83,58,11,.07);
  max-width:760px;margin:10px auto 34px}
.tt-replybox .comment-reply-title{font-size:1.6rem;color:#533A0B;margin:0 0 6px;line-height:1.25}
.tt-replybox .comment-reply-title small{display:block;font-size:.78rem;font-weight:600;
  margin-top:6px}
.tt-reply-intro{font-size:.92rem;color:#6b5a2a;line-height:1.7;margin:0 0 18px}
.tt-loggedin{font-size:.86rem;color:#6b5a2a;margin:0 0 4px}
.tt-req{color:#B03A2E}

.tt-replybox label{display:block;font-size:.82rem;font-weight:800;color:#533A0B;
  margin:14px 0 5px;letter-spacing:.04em;text-transform:none}
.tt-replybox input[type=text],
.tt-replybox input[type=email],
.tt-replybox textarea{width:100%;border:1px solid #ded0aa !important;border-radius:8px !important;
  padding:12px 14px !important;font-size:.96rem;color:#2C2C2C;background:#fffdf7 !important;
  box-shadow:none !important}
.tt-replybox input[type=text]:focus,
.tt-replybox input[type=email]:focus,
.tt-replybox textarea:focus{outline:none;border-color:#C98B22 !important;
  box-shadow:0 0 0 3px rgba(232,168,56,.22) !important}
.tt-replybox textarea{resize:vertical;min-height:132px}

.tt-replyrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tt-replyrow p{margin:0}
.tt-replybox .comment-form-comment{margin:0}

.tt-replybox .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px;
  margin:16px 0 0}
.tt-replybox .comment-form-cookies-consent input{width:auto !important;margin-top:3px}
.tt-replybox .comment-form-cookies-consent label{margin:0;font-weight:600;font-size:.8rem;
  color:#6b5a2a;letter-spacing:0}

.tt-replybox .form-submit{margin:0}
.tt-replybox .postbtn,
.tt-replybox input[type=submit].postbtn{margin-top:20px !important;background:#E8A838 !important;
  color:#3A2706 !important;border:0 !important;border-radius:8px !important;
  padding:14px 32px !important;font-weight:800;font-size:.98rem;cursor:pointer;
  width:auto !important;transition:background .2s ease}
.tt-replybox .postbtn:hover,
.tt-replybox input[type=submit].postbtn:hover{background:#F5D76E !important}

.tt-replynote{font-size:.8rem;color:#8a6a2a;margin:14px 0 0;line-height:1.6}

@media(max-width:640px){
.tt-replyrow{grid-template-columns:1fr}
.tt-replybox{padding:24px 20px 22px;border-radius:12px}
}

/* === 13. In-production film card ===
   Used on the Stories page for films that are written but not yet animated.
   The Honeybees Golden Gift clip loops silently behind a scrim so an unfinished
   slot still looks like the brand rather than like a missing image. Motion is
   dropped entirely for anyone who asks for reduced motion.  */
.tt-soon{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:16/9;
  background:linear-gradient(160deg,#FDF7E3,#F4E2A0);box-shadow:0 12px 34px rgba(83,58,11,.22)}
.tt-soon__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88)}
.tt-soon__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(58,39,6,.16) 0%,rgba(58,39,6,.60) 60%,rgba(58,39,6,.84) 100%)}
.tt-soon__body{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;text-align:center}
.tt-soon__eyebrow{display:inline-block;letter-spacing:.2em;text-transform:uppercase;
  font-size:.66rem;font-weight:800;color:#3A2706;background:var(--tt-amber,#E8A838);
  border-radius:999px;padding:6px 15px}
.tt-soon__line{margin:10px 0 0;color:#FFF8E7;font-size:.9rem;line-height:1.6;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){.tt-soon__v{display:none}}
@media(max-width:640px){
.tt-soon__body{padding:14px 16px}
.tt-soon__line{font-size:.84rem}
.tt-soon__eyebrow{font-size:.6rem}
}