/*
Theme Name: Dinni Doll Colourfull
Theme URI: https://dinnidoll.com/
Author: Dinni Doll
Author URI: https://dinnidoll.com/
Description: Mockup Q, Leaded Light. A stained glass window rendered entirely in local SVG: near-black ground, jewel-tone panes behind every page, a leaded arch over the homepage, gold art nouveau flourishes and gilt-framed artwork. Child of Kadence, so pages stay editable in the block editor. Switch back to Kadence or to Dinni Doll Purple Damask to undo. Change --glass-strength at the top of style.css to turn the glass up or down.
Template: kadence
Version: 1.3.4
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dinni-doll-colourfull
Tags: two-columns, custom-colors, custom-menu, editor-style, block-styles, full-width-template
*/

/* ==========================================================================
   DINNI DOLL COLOURFULL
   Mockup Q, "Leaded Light": a stained glass window, content lives in the panes.

   Nothing here loads from outside the site. Every decorative element is a
   local SVG in this theme's /assets/ folder. To soften the whole treatment,
   change --glass-strength near the top. To remove the window entirely,
   delete the GLASS BACKDROP section.
   ========================================================================== */

:root{
  /* ground */
  --dd-void:#07090D;
  --dd-ink:#0A0D12;
  --dd-ink-2:#0D1117;
  --dd-scrim:rgba(7,9,13,.72);

  /* lead came */
  --dd-lead:#5F646B;
  --dd-lead-hi:#8E959C;

  /* gold */
  --dd-gold:#C9A24A;
  --dd-goldlt:#F0C46A;
  --dd-goldpale:#E8D9A8;

  /* glass */
  --dd-teal:#21515A;
  --dd-tealdk:#183539;
  --dd-ochre:#6B5630;
  --dd-purple:#422A52;
  --dd-wine:#4A2030;
  --dd-forest:#1A3A28;
  --dd-indigo:#2B233F;

  /* type */
  --dd-cream:#EDE4D2;
  --dd-text:#C4C0B6;
  --dd-mute:#A5A29A;

  /* how loudly the glass shows through behind content */
  --glass-strength:.82;

  --dd-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --dd-sans:Jost,"Helvetica Neue",system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   GLASS BACKDROP
   A fixed leaded window behind every page, with a scrim so text stays legible.
   ========================================================================== */

html{background:var(--dd-void)}

body{
  background:var(--dd-void);
  color:var(--dd-text);
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:url(assets/glass-mosaic.svg) center top / cover no-repeat,var(--dd-void);
  opacity:var(--glass-strength);
  pointer-events:none;
}

/* Light coming THROUGH the window, plus a soft vignette so the edges settle.
   Deliberately light: a heavy flat scrim here is what made the glass look
   like it had a sheet of tinted perspex over it. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    /* light coming through the window */
    radial-gradient(120% 80% at 50% 12%,rgba(255,233,190,.16) 0%,transparent 62%),
    /* the reading band: the glass is dimmed down the middle where the content
       column sits, and left luminous at the edges. This is what the mockup
       does, and it is why text can sit straight on glass there. */
    linear-gradient(90deg,
      transparent 0%,rgba(5,7,10,.30) 12%,rgba(5,7,10,.66) 26%,
      rgba(5,7,10,.66) 74%,rgba(5,7,10,.30) 88%,transparent 100%),
    /* vignette */
    radial-gradient(150% 115% at 50% 42%,transparent 40%,rgba(5,7,10,.50) 100%),
    linear-gradient(180deg,rgba(5,7,10,.14) 0%,rgba(5,7,10,.20) 55%,rgba(5,7,10,.34) 100%);
  pointer-events:none;
}

#page,#wrapper,.site{position:relative;z-index:1}

/* Kadence's own panels must not paint over the glass */
#wrapper,.site,.site-container,.content-container,.content-area,.site-main,
.entry-content,.content-bg,.entry-content-wrap,.entry-hero-container,
.entry-hero-container-inner,.entry-hero .hero-section-overlay,
.entry-hero-section,.post-archive-title,.post-title{
  background:transparent!important;
  box-shadow:none!important;
}

/* Kadence paints the archive hero with var(--global-palette7). That palette is
   still the Purple Damask one, copied over with the theme mods when Colourfull
   was activated, so the blog archive showed a flat plum band. The rule above
   clears the band; these three redefine the palette's dark slots so nothing
   else Kadence colours by variable comes through plum either. */
:root{
  --global-palette7:#0A0D12;
  --global-palette8:#07090D;
  --global-palette9:#05070A;
}

/* Kadence's default search widget, which the empty blog archive falls back to */
.search-field,.wp-block-search__input{
  background:rgba(7,9,13,.72)!important;
  border:1px solid rgba(201,162,74,.34)!important;
  color:var(--dd-cream)!important;
}
.search-field::placeholder,.wp-block-search__input::placeholder{
  color:var(--dd-mute)!important;opacity:1;
}
.search-field:focus,.wp-block-search__input:focus{
  border-color:rgba(240,196,106,.7)!important;
  outline:none!important;
}
.content-container{padding-top:0!important;padding-bottom:0!important}
.entry-content-wrap{padding:0!important}

a{color:var(--dd-goldlt)}
a:hover{color:var(--dd-goldpale)}

::selection{background:rgba(240,196,106,.28);color:var(--dd-cream)}

/* ==========================================================================
   HEADER
   The window arch springs from behind the masthead.
   ========================================================================== */

#masthead,#masthead .site-header-wrap,#masthead .site-header-row-container{
  background:transparent!important;
  border-bottom:0!important;
  border:0!important;
}

#masthead{
  position:relative;
  background-image:linear-gradient(180deg,rgba(7,9,13,.86) 0%,rgba(7,9,13,.42) 70%,transparent 100%)!important;
}

.site-title{
  font-family:var(--dd-serif)!important;
  font-weight:400!important;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:clamp(1.55rem,5.4vw,3.5rem)!important;
  line-height:1.1!important;
  margin:0!important;
}
.site-title,.site-title a{color:var(--dd-cream)!important}
.site-branding{text-align:center}

.header-html{
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.68rem;
  color:var(--dd-gold);
  text-align:center;
  margin:0;
}

.site-header-bottom-section-center,.site-header-section-center{
  flex-direction:column;
  gap:1.05rem;
  align-items:center;
}
.site-header-section-center>.site-header-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.site-header-item{margin-bottom:0}

/* nav pill, now leaded rather than rounded */
.header-navigation .header-menu-container>ul.menu{
  border:1px solid rgba(201,162,74,.42);
  border-radius:2px;
  padding:.45rem 1.5rem;
  background:rgba(7,9,13,.55);
  box-shadow:0 0 0 1px rgba(7,9,13,.6),0 10px 30px rgba(0,0,0,.5);
}
.header-navigation ul li a{
  text-decoration:none!important;
  font-family:var(--dd-sans)!important;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.76rem!important;
  color:var(--dd-goldlt)!important;
  padding-left:.85rem;
  padding-right:.85rem;
}
.header-navigation ul li a:hover,
.header-navigation ul li.current-menu-item a,
.header-navigation ul li.current_page_item a{color:#fff!important}

/* mobile drawer */
#mobile-drawer .drawer-inner,.popup-drawer .drawer-inner{
  background:var(--dd-ink)!important;
  border-left:1px solid rgba(201,162,74,.3);
}
#mobile-drawer .drawer-inner::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;
  opacity:.28;pointer-events:none;
}
#mobile-drawer .drawer-content,#mobile-drawer .drawer-header{position:relative;z-index:1}
#mobile-drawer .menu-item a,.mobile-navigation ul li a{
  font-family:var(--dd-sans)!important;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.82rem!important;
  color:var(--dd-goldlt)!important;
  border-bottom:1px solid rgba(201,162,74,.16);
}
.drawer-toggle .menu-toggle-icon,.drawer-toggle{color:var(--dd-goldlt)!important}

/* ==========================================================================
   SHARED ELEMENTS
   ========================================================================== */

.dd-gold{color:var(--dd-goldlt);font-style:italic}

.dd-eyebrow{
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.7rem;
  color:var(--dd-gold);
  margin:0 0 1.1rem;
}

.dd-caption{
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.62rem;
  color:var(--dd-mute);
  text-align:center;
  margin:.9rem 0 0;
}

.dd-body{font-size:1.02rem;line-height:1.8;color:var(--dd-text)}

/* A caption that links out. Gold marks it as a link against the muted caption
   text, and the underline is softened so it still reads as a caption rather
   than body copy. */
.dd-caption a{
  color:var(--dd-goldlt);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(240,196,106,.45);
}
.dd-caption a:hover,
.dd-caption a:focus-visible{
  color:#fff;
  text-decoration-color:currentColor;
}

/* every framed image gets the leaded-and-gilt treatment */
.dd-frame{margin:0}
.dd-frame img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(201,162,74,.9);
  box-shadow:
    0 0 0 4px rgba(10,13,18,.95),
    0 0 0 6px rgba(201,162,74,.32),
    0 24px 58px rgba(0,0,0,.72);
  border-radius:1px;
}

.dd-section-title{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:clamp(1.85rem,4.4vw,2.9rem);
  color:var(--dd-cream);
  margin:0 0 2.3rem;
  padding-top:2.9rem;
  position:relative;
  line-height:1.15;
}
.dd-section-title::before{
  content:"";
  position:absolute;top:.6rem;left:50%;transform:translateX(-50%);
  width:min(320px,72%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,74,.75),transparent);
}
.dd-section-title::after{
  content:"\25C6";
  position:absolute;top:.1rem;left:50%;transform:translateX(-50%);
  font-size:.52rem;color:var(--dd-gold);
  background:var(--dd-ink);padding:0 .7rem;line-height:1;
}

/* a reusable glass panel: content sits in a leaded pane */
.dd-noai,.dd-studio,.dd-formwrap,.dd-gsection:nth-of-type(even),
.dd-social-grid .wp-block-column,.loop-entry{
  position:relative;
  isolation:isolate;
}

/* ==========================================================================
   HERO, the leaded window
   ========================================================================== */

.dd-hero{
  position:relative;
  padding:clamp(2.4rem,5.5vw,4.6rem) 0 clamp(2.6rem,6vw,5rem);
  isolation:isolate;
  /* the arch is wider than the hero, so clip it rather than let the page
     scroll sideways. clip is used in preference to hidden so a sticky
     Kadence header is not broken. */
  overflow-x:clip;
}
html,body{overflow-x:clip}

/* the arch itself */
.dd-hero::before{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:-190px;
  width:min(1400px,132%);
  height:calc(100% + 240px);
  background:url(assets/arch.svg) center top / 100% 100% no-repeat;
  opacity:.92;
  z-index:-1;
  pointer-events:none;
}

/* art nouveau flourishes, left and mirrored right */
.dd-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    url(assets/flourish-l.svg) left -2% top 58% / clamp(120px,17vw,300px) auto no-repeat,
    url(assets/flourish-r.svg) right -2% top 58% / clamp(120px,17vw,300px) auto no-repeat;
  /* They overlay the hero rather than needing a gutter, which is what the
     mockup does. Low opacity keeps them behind the reading, not in it. */
  opacity:.55;
  mix-blend-mode:screen;
}
/* Flourishes switched off 26 Sept 2026 at Neil's request. Delete this
   rule to bring them back; the rule above and both SVGs are untouched. */
.dd-hero::after{display:none}

.dd-h1{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:clamp(2.15rem,5.1vw,3.55rem);
  line-height:1.08;
  color:var(--dd-cream);
  margin:0 0 1.5rem;
  text-shadow:0 2px 26px rgba(7,9,13,.9);
}

/* :not(.dd-caption) matters. Without it this rule outranks .dd-caption
   (0,1,1 beats 0,1,0) and the hero caption renders at lede size and
   colour instead of as a caption. */
.dd-lede,.dd-hero p:not(.dd-caption){
  font-size:clamp(.99rem,1.5vw,1.1rem);
  line-height:1.78;
  color:var(--dd-text);
  max-width:34em;
  margin:0 0 1rem;
}

.dd-buttons{margin-top:2rem;gap:.85rem}

.dd-btn-gold .wp-block-button__link{
  background:linear-gradient(180deg,#F6D488,#C9A24A)!important;
  color:#0A0D12!important;
  border:0!important;
  border-radius:1px!important;
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.74rem;
  font-weight:500;
  padding:.95rem 1.9rem;
  box-shadow:0 0 0 1px rgba(7,9,13,.8),0 10px 26px rgba(0,0,0,.55);
}
.dd-btn-gold .wp-block-button__link:hover{filter:brightness(1.09)}

.dd-btn-ghost .wp-block-button__link{
  background:rgba(7,9,13,.5)!important;
  color:var(--dd-goldlt)!important;
  border:1px solid rgba(201,162,74,.65)!important;
  border-radius:1px!important;
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.74rem;
  padding:.95rem 1.9rem;
}
.dd-btn-ghost .wp-block-button__link:hover{
  border-color:var(--dd-goldlt)!important;
  color:#fff!important;
  background:rgba(201,162,74,.12)!important;
}

/* ==========================================================================
   NO AI band, a single lit pane
   ========================================================================== */

.dd-noai{
  padding:clamp(3rem,7vw,5.5rem) 1.1rem;
  background:
    linear-gradient(180deg,rgba(66,42,82,.55),rgba(26,58,40,.35)),
    var(--dd-ink);
  border-top:1px solid rgba(201,162,74,.34);
  border-bottom:1px solid rgba(201,162,74,.34);
  margin:0;
}
.dd-noai::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.dd-noai::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 130% at 50% 0%,rgba(240,196,106,.10),transparent 62%);
}
.dd-noai-title{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:clamp(1.95rem,5.4vw,3.5rem);
  line-height:1.14;
  color:var(--dd-cream);
  margin:0 0 1.3rem;
  max-width:20ch;
  margin-left:auto;margin-right:auto;
  text-shadow:0 2px 22px rgba(7,9,13,.85);
}
.dd-noai-text{
  max-width:46rem;
  margin:0 auto;
  font-size:clamp(1rem,1.7vw,1.18rem);
  line-height:1.8;
  color:var(--dd-text);
}

/* ==========================================================================
   CRAFTS
   ========================================================================== */

.dd-crafts{padding:clamp(2rem,3.6vw,3.2rem) 0}
.dd-crafts-cols .wp-block-column{
  border-left:1px solid rgba(201,162,74,.18);
  padding-left:1.2rem;
}
.dd-crafts-cols .wp-block-column:first-child{border-left:0;padding-left:0}
.dd-craft-title{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:1.26rem;
  color:var(--dd-cream);
  margin:0 0 .55rem;
}
.dd-craft-text{font-size:.92rem;line-height:1.7;color:var(--dd-mute);margin:0}

/* ==========================================================================
   FEATURED CARDS, gilt frames on a glass mosaic band
   ========================================================================== */

.dd-featured{
  padding:clamp(1.8rem,3.4vw,3rem) 0;
  position:relative;
}
.dd-cards{
  gap:1.4rem!important;
  position:relative;
  padding:1.6rem 1.4rem 1.8rem;
  isolation:isolate;
}
.dd-cards::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/mosaic-band.svg) center / cover no-repeat;
  opacity:.95;
  border:1px solid rgba(95,100,107,.55);
  box-shadow:inset 0 0 0 1px rgba(12,17,22,.9);
}
.dd-cards .wp-block-column{display:flex;flex-direction:column}
/* Every featured card gets the same 4:5 frame. contain, not cover, because a
   landscape piece would lose about a third of its width to a crop. Instead it
   sits uncropped on the dark ground, like a mount inside the gilt frame, and
   the four frames stay the same size so the titles line up. */
.dd-cards .dd-frame img{
  aspect-ratio:4/5;
  object-fit:contain;
  background:var(--dd-ink);
  width:100%;
  height:auto;
  border:2px solid var(--dd-gold);
  box-shadow:
    0 0 0 4px rgba(10,13,18,.92),
    0 0 0 5px rgba(201,162,74,.45),
    0 18px 40px rgba(0,0,0,.7);
}
.dd-card-title{
  font-family:var(--dd-serif);
  font-weight:400;
  font-size:1.06rem;
  color:var(--dd-cream);
  margin:1rem 0 .3rem;
  text-align:center;
  line-height:1.3;
}
.dd-card-meta{
  font-family:var(--dd-sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.6rem;
  color:var(--dd-goldlt);
  text-align:center;
  margin:0;
  margin-top:auto;
  /* Reserve two lines. A meta that wraps would otherwise hang below its
     neighbours and pull that one card out of line. 3.5em is the same as 2lh
     at the current size and is the fallback for browsers without lh. */
  min-height:3.5em;
  min-height:2lh;
}

/* ==========================================================================
   STUDIO
   ========================================================================== */

.dd-studio{
  padding:clamp(1.8rem,3.4vw,3rem) 0;
  background:linear-gradient(180deg,rgba(24,53,57,.42),rgba(7,9,13,.6));
  border-top:1px solid rgba(201,162,74,.2);
  border-bottom:1px solid rgba(201,162,74,.2);
}
.dd-studio::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;
  opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
}
/* long reading passages get their own scrim so the glass never fights the text */
.dd-studio-cols .wp-block-column:last-child{
  background:linear-gradient(180deg,rgba(5,7,10,.80),rgba(5,7,10,.86));
  padding:1.4rem 1.6rem;
  border-left:1px solid rgba(201,162,74,.22);
}
.dd-studio-cols{gap:2.4rem}
.dd-studio-cols .wp-block-column:first-child{flex-basis:34%!important}
.dd-studio-cols .wp-block-column:last-child{flex-basis:66%!important}
.dd-studio-cols .dd-frame img,.dd-studio-cols .dd-caption{
  max-width:340px;margin-left:auto;margin-right:auto;
}

/* ==========================================================================
   SIGNUP
   ========================================================================== */

.dd-signup{padding:clamp(2.4rem,6vw,4.4rem) 0 clamp(3rem,7vw,5rem)}
.dd-signup-form{display:flex;gap:.6rem;max-width:30rem;margin:1.7rem auto 0}
.dd-signup-form input{
  flex:1 1 auto;min-width:0;
  background:rgba(7,9,13,.62);
  border:1px solid rgba(201,162,74,.45);
  color:var(--dd-cream);
  padding:.85rem 1rem;
  border-radius:1px;
  font-family:var(--dd-sans);
  font-size:.95rem;
}
.dd-signup-form input::placeholder{color:#6F6C66}
.dd-signup-form input:focus{
  outline:none;border-color:var(--dd-goldlt);
  box-shadow:0 0 0 3px rgba(201,162,74,.16);
}
.dd-join{
  background:linear-gradient(180deg,#F6D488,#C9A24A);
  color:#0A0D12;border:0;
  padding:.85rem 1.6rem;border-radius:1px;
  font-family:var(--dd-sans);
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;white-space:nowrap;cursor:pointer;
}
.dd-join:hover{filter:brightness(1.08)}
.dd-signup-note{
  text-align:center;font-size:.68rem;color:#6F6C66;
  margin:.85rem 0 0;font-family:var(--dd-sans);
  letter-spacing:.1em;text-transform:uppercase;
}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#colophon,.site-footer,.site-footer-row-container{
  background:rgba(5,7,10,.86)!important;
  border-top:1px solid rgba(201,162,74,.28);
  position:relative;
}
.site-footer,.site-footer p,.site-footer li{color:var(--dd-mute)}
.site-footer a{color:var(--dd-mute);text-decoration:none}
.site-footer a:hover{color:var(--dd-goldlt)}
.dd-foot-title{
  font-family:var(--dd-serif);font-weight:400;
  font-size:1.1rem;color:var(--dd-cream);margin:0 0 .8rem;
}
.dd-foot-list{list-style:none;margin:0;padding:0;line-height:2}
/* The legal column deliberately carries NO type overrides. It also has the
   .dd-foot-list class, so it inherits exactly the same size, colour, weight
   and line height as Explore and Elsewhere. An earlier version made it
   smaller and greyer to read as secondary; it just looked like a mistake. */
.footer-html{
  font-family:var(--dd-sans);text-transform:uppercase;
  letter-spacing:.18em;font-size:.63rem;color:#6F6C66;
}
.site-footer .widget{margin-bottom:0}
.site-footer .dd-signup-form input{font-size:.9rem;padding:.7rem .85rem}
.site-footer .dd-join{padding:.7rem 1.2rem;font-size:.68rem}
.site-middle-footer-inner-wrap{gap:2.4rem}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.entry-content,.content-container,.site-main{
  max-width:none!important;padding-left:0!important;padding-right:0!important;
}
.dd-hero,.dd-crafts,.dd-featured,.dd-studio,.dd-signup{padding-left:24px;padding-right:24px}
.dd-hero>*,.dd-crafts>*,.dd-featured>*,.dd-studio>*,.dd-signup>*,.dd-noai>*{
  max-width:1180px;margin-left:auto!important;margin-right:auto!important;
}
.dd-noai-text{max-width:46rem!important}
.dd-signup-form{max-width:30rem!important}
.alignfull{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
.dd-hero-cols{gap:3rem;align-items:center}
.dd-hero-cols .dd-frame img{max-width:500px;margin-left:auto;margin-right:0}
.dd-hero-cols .dd-caption{max-width:500px;margin-left:auto;margin-right:0}
.entry-content>.wp-block-group.alignfull{
  padding-left:clamp(20px,4vw,48px)!important;padding-right:clamp(20px,4vw,48px)!important;
}
.entry-content>.wp-block-group.alignfull>*{
  max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;
}
.entry-content .wp-block-columns{margin-bottom:0}
.dd-section-title{padding-top:2.1rem;margin-bottom:1.7rem}

/* ==========================================================================
   GALLERY
   ========================================================================== */

.dd-page-hero{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.4rem,3vw,2.2rem);position:relative}
.dd-h1-page{
  font-family:var(--dd-serif);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.2rem)!important;
  color:var(--dd-cream);margin:0 0 1.2rem;line-height:1.1;
  text-shadow:0 2px 24px rgba(7,9,13,.9);
}
.dd-lede-centre{max-width:44rem;margin-left:auto!important;margin-right:auto!important}
.dd-jump{gap:.6rem!important;margin-top:1.8rem;flex-wrap:wrap}
.dd-jump .wp-block-button__link{
  font-size:.66rem!important;padding:.7rem 1.2rem!important;letter-spacing:.16em;
  background:rgba(7,9,13,.55)!important;color:var(--dd-goldlt)!important;
  border:1px solid rgba(201,162,74,.5)!important;border-radius:1px!important;
  font-family:var(--dd-sans);text-transform:uppercase;
}
.dd-jump .wp-block-button__link:hover{
  background:rgba(201,162,74,.14)!important;color:#fff!important;
}

.dd-gsection{padding:clamp(2.2rem,5vw,3.8rem) 0;scroll-margin-top:1rem}
.dd-gsection:nth-of-type(even){
  background:linear-gradient(180deg,rgba(42,35,63,.42),rgba(7,9,13,.55));
  border-top:1px solid rgba(201,162,74,.16);
  border-bottom:1px solid rgba(201,162,74,.16);
}
.dd-gsection:nth-of-type(even)::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
}
.dd-sec-intro{
  max-width:44rem;margin:0 auto 2.2rem!important;
  color:var(--dd-mute);font-size:1rem;line-height:1.75;
}
.dd-sub{
  font-family:var(--dd-sans)!important;text-transform:uppercase;
  letter-spacing:.28em;font-size:.7rem!important;color:var(--dd-goldlt)!important;
  margin:2.8rem 0 1.4rem!important;font-weight:400!important;
  text-shadow:0 1px 8px rgba(5,7,10,.95);
}
.dd-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:1.6rem 1.4rem!important;align-items:start;
}
.dd-grid .wp-block-image{
  margin:0!important;width:auto!important;flex-grow:0!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
}
.dd-grid .wp-block-image img{
  width:100%;aspect-ratio:4/5!important;height:auto!important;
  object-fit:cover!important;flex:0 0 auto!important;display:block;
  border:1px solid rgba(201,162,74,.85);
  box-shadow:0 0 0 3px rgba(10,13,18,.95),0 0 0 4px rgba(201,162,74,.28),0 16px 38px rgba(0,0,0,.66);
  border-radius:1px;
}
#prints .dd-grid .wp-block-image img,#digital .dd-grid .wp-block-image img{
  object-fit:contain!important;background:var(--dd-ink);
}
.dd-grid figcaption,.dd-vids figcaption{
  font-family:var(--dd-sans)!important;font-size:.78rem!important;
  line-height:1.55!important;color:var(--dd-mute)!important;
  text-align:left!important;margin:.7rem 0 0!important;padding:0!important;
  background:none!important;
  /* relative, not static: the reading scrim is an absolutely positioned
     ::before and needs this element as its containing block. */
  position:relative!important;
  flex:0 0 auto!important;flex-grow:0!important;align-self:stretch;
}
#digital .dd-grid{
  grid-template-columns:repeat(2,1fr)!important;max-width:720px;
  margin-left:auto!important;margin-right:auto!important;
}
.dd-vids{gap:1.4rem!important}
.dd-vids .wp-block-video{margin:0}
.dd-vids video{
  width:100%;display:block;
  border:1px solid rgba(201,162,74,.8);
  box-shadow:0 0 0 3px rgba(10,13,18,.95),0 16px 38px rgba(0,0,0,.66);
  border-radius:1px;background:var(--dd-ink);
}
.dd-note{
  max-width:40rem;margin:2rem auto 0!important;
  font-size:.9rem;color:var(--dd-mute);font-style:italic;
}
/* A closing line followed immediately by the page's own navigation button.
   Left as it was, the two sat flush against each other and read as one lump.
   Scoped by adjacency rather than by page id, so it only fires on that exact
   pairing: the Gallery uses both classes but not next to each other, and is
   untouched. Where :has() is unsupported the note simply stays left aligned,
   which is the old behaviour rather than a broken one. */
.dd-note:has(+ .wp-block-buttons){text-align:center}
.dd-note + .wp-block-buttons{margin-top:4rem}
.dd-gcta{
  padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.5rem);
  border-top:1px solid rgba(201,162,74,.28);
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.entry-hero-container .entry-header,.post-title .entry-header{text-align:center}
h1.entry-title,.post-archive-title h1{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  color:var(--dd-cream)!important;
  font-size:clamp(1.9rem,4.4vw,3rem)!important;line-height:1.15!important;
  text-shadow:0 2px 24px rgba(7,9,13,.9);
}
.entry-meta,.entry-taxonomies,.posted-on,.byline{
  font-family:var(--dd-sans)!important;text-transform:uppercase;
  letter-spacing:.2em;font-size:.64rem!important;color:var(--dd-gold)!important;
}
.entry-meta a,.entry-taxonomies a{color:var(--dd-gold)!important;text-decoration:none}
.entry-taxonomies a:hover{color:var(--dd-goldlt)!important}

.loop-entry{
  background:linear-gradient(180deg,rgba(33,81,90,.28),rgba(7,9,13,.72))!important;
  border:1px solid rgba(201,162,74,.32)!important;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(12,17,22,.9),0 18px 44px rgba(0,0,0,.6);
  overflow:hidden;
}
.loop-entry::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;opacity:.7;
}
.loop-entry .entry-content-wrap{padding:1.6rem!important}
.loop-entry h2.entry-title{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  font-size:1.35rem!important;line-height:1.25!important;
}
.loop-entry h2.entry-title a{color:var(--dd-cream)!important;text-decoration:none}
.loop-entry h2.entry-title a:hover{color:var(--dd-goldlt)!important}
.loop-entry .entry-summary p{color:var(--dd-mute);font-size:.94rem;line-height:1.7}
.loop-entry .post-thumbnail img{border-bottom:1px solid rgba(201,162,74,.34)}

.entry-content>p,.entry-content>ul,.entry-content>ol,
.single .entry-content>h2,.single .entry-content>h3{
  max-width:min(38rem,100%)!important;box-sizing:border-box;
  margin-left:auto;margin-right:auto;
}
.single .content-container,.single .entry-content{padding-left:20px!important;padding-right:20px!important}
.single .entry-content h2{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  color:var(--dd-cream)!important;font-size:1.7rem!important;
  margin-top:2.6rem!important;margin-bottom:.9rem!important;line-height:1.25!important;
}
.single .entry-content h3{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  color:var(--dd-goldlt)!important;font-size:1.22rem!important;
  margin-top:2rem!important;margin-bottom:.7rem!important;
}
.single .entry-content p{font-size:1.05rem;line-height:1.85;color:var(--dd-text)}
.single .entry-content{
  background:linear-gradient(180deg,rgba(5,7,10,0),rgba(5,7,10,.82) 3%,rgba(5,7,10,.86) 97%,rgba(5,7,10,0));
}
.dd-lede-post{font-size:1.18rem!important;line-height:1.75!important;color:var(--dd-cream)!important}
.single .post-thumbnail{display:flex;justify-content:center;margin-bottom:1.6rem}
.single .post-thumbnail-inner{margin:0 auto;max-width:420px}
.single .post-thumbnail img,.single .entry-content .dd-frame img{
  max-width:420px!important;width:100%;height:auto;margin-left:auto;margin-right:auto;
  border:1px solid rgba(201,162,74,.85);
  box-shadow:0 0 0 4px rgba(10,13,18,.95),0 0 0 5px rgba(201,162,74,.3),0 20px 46px rgba(0,0,0,.7);
  border-radius:1px;
}
.single .entry-header{margin-top:.5rem}
.entry-related,.comments-area{background:transparent}
.pagination a,.pagination .current{
  font-family:var(--dd-sans);letter-spacing:.14em;
  font-size:.74rem;color:var(--dd-goldlt);
}

/* ==========================================================================
   SOCIALS
   ========================================================================== */

.dd-socials{padding:clamp(1.6rem,4vw,3rem) 0}
.dd-social-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:1.2rem!important}
.dd-social-grid .wp-block-column{
  flex-basis:auto!important;width:auto!important;
  background:linear-gradient(180deg,rgba(66,42,82,.5),rgba(7,9,13,.72));
  border:1px solid rgba(201,162,74,.34);
  border-radius:2px;padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(12,17,22,.85);
}
.dd-social-grid .wp-block-column::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;opacity:.72;
}
.dd-social-card.is-live{border-color:rgba(201,162,74,.8);box-shadow:0 0 0 3px rgba(201,162,74,.1)}
.dd-social-card.is-pending{opacity:.72}
.dd-social-name{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  font-size:1.3rem!important;color:var(--dd-cream)!important;margin:0 0 .5rem!important;
}
.dd-social-line{font-size:.92rem;line-height:1.65;color:var(--dd-mute);margin:0 0 1.1rem;flex:1 1 auto}
.dd-social-link{margin:0}
.dd-social-link a{
  font-family:var(--dd-sans);text-transform:uppercase;
  letter-spacing:.18em;font-size:.66rem;color:var(--dd-goldlt);text-decoration:none;
}
.dd-social-card.is-pending .dd-social-link a{color:#6F6C66;pointer-events:none}
.dd-social-link a:hover{color:#fff}
/* a lone leftover card in the grid last row centres itself under the middle column */
.dd-social-grid .wp-block-column:nth-child(3n+1):last-child{grid-column:2}
.dd-feed{padding:clamp(1.8rem,4.5vw,3.4rem) 0}
.dd-feedgrid .wp-block-image img{aspect-ratio:1/1!important}

/* ==========================================================================
   CONTACT AND WPFORMS
   ========================================================================== */

.dd-commissions{padding:clamp(1.8rem,4.5vw,3.4rem) 0}
.dd-measure{max-width:min(40rem,100%);margin-left:auto!important;margin-right:auto!important}
.dd-sub-left{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  color:var(--dd-goldlt)!important;font-size:1.2rem!important;
  max-width:min(40rem,100%);margin:2.2rem auto .7rem!important;
}

/* .dd-sub-left centres itself inside a 40rem measure, which is right on the
   Contact page but leaves the studio subheads indented from the body text by
   a margin that changes with viewport width. Align them to the column. */
.dd-studio .dd-sub-left{
  max-width:none;
  margin-left:0!important;
  margin-right:0!important;
}
.dd-formwrap{
  padding:clamp(1.8rem,4.5vw,3rem) 0 clamp(2.6rem,6vw,4rem);
  background:linear-gradient(180deg,rgba(26,58,40,.38),rgba(7,9,13,.7));
  border-top:1px solid rgba(201,162,74,.28);
  border-bottom:1px solid rgba(201,162,74,.28);
}
.dd-formwrap::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,7,10,.42) 10%,rgba(5,7,10,.74) 24%,rgba(5,7,10,.74) 76%,rgba(5,7,10,.42) 90%,transparent 100%),
    url(assets/glass-calm.svg) center / cover no-repeat;opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
div.wpforms-container,div.wpforms-container-full,.wpforms-block{
  max-width:min(38rem,100%)!important;margin-left:auto!important;margin-right:auto!important;
}
.wpforms-container .wpforms-form{background:transparent}
.wpforms-container .wpforms-field{padding:0 0 1.3rem!important}
.wpforms-container .wpforms-field-label{
  font-family:var(--dd-sans)!important;text-transform:uppercase!important;
  letter-spacing:.2em!important;font-size:.68rem!important;font-weight:400!important;
  color:var(--dd-gold)!important;margin-bottom:.55rem!important;
}
.wpforms-container .wpforms-field-sublabel{
  font-family:var(--dd-sans)!important;font-size:.7rem!important;color:#6F6C66!important;
  text-transform:none!important;letter-spacing:.04em!important;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container textarea{
  background:rgba(7,9,13,.62)!important;
  border:1px solid rgba(201,162,74,.45)!important;
  border-radius:1px!important;color:var(--dd-cream)!important;
  font-family:var(--dd-sans)!important;font-size:1rem!important;
  padding:.8rem .95rem!important;box-shadow:none!important;
  width:100%!important;max-width:100%!important;box-sizing:border-box;
}
.wpforms-container input:focus,.wpforms-container textarea:focus{
  border-color:var(--dd-goldlt)!important;outline:none!important;
  box-shadow:0 0 0 3px rgba(201,162,74,.16)!important;
}
.wpforms-container input::placeholder,.wpforms-container textarea::placeholder{color:#6F6C66!important}
.wpforms-container textarea{min-height:150px!important}
.wpforms-container ul.wpforms-field-required,
.wpforms-container .wpforms-field-checkbox ul{list-style:none!important;margin:0!important;padding:0!important}
.wpforms-container .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:.65rem}
.wpforms-container .wpforms-field-checkbox input[type=checkbox]{
  width:1.05rem!important;height:1.05rem!important;margin-top:.2rem;
  accent-color:#C9A24A;flex:0 0 auto;
}
.wpforms-container .wpforms-field-checkbox label{
  font-family:var(--dd-sans)!important;font-size:.95rem!important;
  color:var(--dd-text)!important;line-height:1.6;
}
.wpforms-container .wpforms-required-label{color:var(--dd-goldlt)!important}
.wpforms-container button[type=submit],.wpforms-container .wpforms-submit{
  background:linear-gradient(180deg,#F6D488,#C9A24A)!important;
  color:#0A0D12!important;border:0!important;border-radius:1px!important;
  font-family:var(--dd-sans)!important;text-transform:uppercase!important;
  letter-spacing:.18em!important;font-size:.74rem!important;font-weight:500!important;
  padding:.95rem 2.1rem!important;cursor:pointer;
}
.wpforms-container button[type=submit]:hover{filter:brightness(1.08)}
.wpforms-container .wpforms-error{color:#F0A9A9!important;font-family:var(--dd-sans)!important;font-size:.8rem!important}
.wpforms-container input.wpforms-error,.wpforms-container textarea.wpforms-error{border-color:#C97070!important}
.wpforms-confirmation-container,.wpforms-confirmation-container-full{
  background:rgba(201,162,74,.09)!important;
  border:1px solid rgba(201,162,74,.45)!important;
  color:var(--dd-text)!important;border-radius:1px;padding:1.4rem!important;
}
.wpforms-confirmation-container p{color:var(--dd-text)!important}
.dd-formwrap .wp-block-shortcode{max-width:min(38rem,100%);margin-left:auto;margin-right:auto}

/* ==========================================================================
   STORE
   The collection filter carries its own scoped styles inside page 32.
   Only the surrounding chrome is styled here.
   ========================================================================== */

.dd-collections{padding-top:.5rem}
.dd-collection-filters .wp-block-button__link{
  background:rgba(7,9,13,.55)!important;
  color:var(--dd-goldlt)!important;
  border:1px solid rgba(201,162,74,.5)!important;
  border-radius:1px!important;
  font-family:var(--dd-sans)!important;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem!important;padding:.72rem 1.25rem!important;
}
.dd-collection-filters .wp-block-button__link:hover{
  background:rgba(201,162,74,.14)!important;color:#fff!important;
}
.dd-unfiled-note{color:var(--dd-mute);border-color:rgba(201,162,74,.55)!important}

/* The Store page group is not alignfull, so it needs its own gutter or the
   listing grid runs hard against the edge of the viewport. */
.dd-collections{
  padding-left:clamp(20px,4vw,48px);
  padding-right:clamp(20px,4vw,48px);
}
.dd-collections>*{max-width:1180px;margin-left:auto!important;margin-right:auto!important}

/* Fast Etsy Listings, real class names as the plugin renders them */
.fu_etsy_listing_item{padding:6px!important}
.fu_etsy_listing_contentwrapper_centre{
  background:rgba(7,9,13,.5);
  border:1px solid rgba(201,162,74,.28);
  border-radius:2px;
  padding:.7rem;
  height:100%;
  box-shadow:0 0 0 1px rgba(12,17,22,.8);
  transition:border-color .18s ease;
}
.fu_etsy_listing_item:hover .fu_etsy_listing_contentwrapper_centre{
  border-color:rgba(201,162,74,.7);
}
.fu_etsy_listing_img img{
  border:1px solid rgba(201,162,74,.45);
  border-radius:1px;
  display:block;
}
.fu_etsy_title,.fu_etsy_title a{
  font-family:var(--dd-serif)!important;
  font-weight:400!important;
  color:var(--dd-cream)!important;
  text-decoration:none;
  line-height:1.3;
}
.fu_etsy_title a:hover{color:var(--dd-goldlt)!important}
.fu_etsy_priceactive,.fu_etsy_price{
  font-family:var(--dd-sans)!important;
  color:var(--dd-goldlt)!important;
  letter-spacing:.06em;
}

/* Fast Etsy Listings prints a third link under every tile, "View on Etsy", so
   each product carried three links to the same listing: the image, the title
   and this one. The Store intro already tells people once that a piece opens
   on Etsy, so the per-tile repeat is noise.
   Collapsed rather than hidden on purpose: the plugin writes
   style="display:block !important" INLINE on 24 of the 25 tiles, and an inline
   !important cannot be beaten by a stylesheet, so display:none here does
   nothing. visibility:hidden is not set inline, wins, and also removes the
   link from the tab order and the accessibility tree. The image and title
   links are untouched, so every tile still goes to its listing. */
.fu_etsy_visitlink{
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* ==========================================================================
   POLICY PAGES
   ========================================================================== */

.dd-policy-h{
  font-family:var(--dd-serif)!important;font-weight:400!important;
  color:var(--dd-cream)!important;font-size:1.5rem!important;
  max-width:min(40rem,100%);margin:2.4rem auto .8rem!important;line-height:1.25!important;
}
.dd-policy-list{color:var(--dd-text);line-height:1.8;font-size:1rem;padding-left:1.2rem}
.dd-policy-list li{margin-bottom:.5rem}
.dd-legal{display:inline-block;margin-top:.6rem;font-size:.6rem;letter-spacing:.16em}
.dd-legal a{color:#6F6C66}
.dd-legal a:hover{color:var(--dd-goldlt)}
.cmplz-document,.cmplz-document p,.cmplz-document li,.cmplz-document td{
  color:var(--dd-text)!important;line-height:1.75;
}
.cmplz-document h1,.cmplz-document h2{
  font-family:var(--dd-serif)!important;font-weight:400!important;color:var(--dd-cream)!important;
}
.cmplz-document h3{
  font-family:var(--dd-serif)!important;font-weight:400!important;color:var(--dd-goldlt)!important;
}
.cmplz-document a{color:var(--dd-goldlt)}
.cmplz-document table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.cmplz-document th,.cmplz-document td{border:1px solid rgba(201,162,74,.25);padding:.6rem .7rem;font-size:.9rem}
.cmplz-document th{
  color:var(--dd-gold)!important;font-family:var(--dd-sans);
  text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;
}
.page .entry-content{padding-bottom:3rem}

/* ==========================================================================
   CONSENT BANNER

   Complianz sets colours directly on its own child elements, so darkening
   only the panel left #222222 text on a #0A0D12 ground at 1.22:1, and the
   policy link at default browser blue. Every child therefore has to be
   recoloured explicitly. Measured on the live banner: title and body 15.41:1,
   links and close 11.87:1, Accept 8.11:1, Deny 15.41:1.

   Accept and Deny are deliberately given identical treatment and identical
   size. Making rejection harder than acceptance is a dark pattern and the
   ICO expects them to be as easy as each other.
   ========================================================================== */

.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent{
  background:var(--dd-ink)!important;
  border:1px solid rgba(201,162,74,.45)!important;
  border-radius:2px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.65)!important;
}

.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-description-category,
.cmplz-cookiebanner p,
.cmplz-cookiebanner label,
.cmplz-cookiebanner .cmplz-categories .cmplz-category{
  color:var(--dd-cream)!important;
}
.cmplz-cookiebanner .cmplz-title{font-family:var(--dd-serif)!important}

.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner .cmplz-close{
  color:var(--dd-goldlt)!important;
  opacity:1!important;
}
.cmplz-cookiebanner a:hover,
.cmplz-cookiebanner .cmplz-close:hover{color:#fff!important}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept{
  background:var(--dd-gold)!important;
  border:1px solid var(--dd-gold)!important;
  color:var(--dd-ink)!important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny{
  background:var(--dd-cream)!important;
  border:1px solid var(--dd-cream)!important;
  color:var(--dd-ink)!important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
  background:transparent!important;
  border:1px solid rgba(201,162,74,.7)!important;
  color:var(--dd-goldlt)!important;
}
.cmplz-cookiebanner .cmplz-btn:hover{filter:brightness(1.08)}

/* keyboard focus has to stay obvious on a near-black panel */
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner button:focus-visible,
.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner input:focus-visible{
  outline:2px solid var(--dd-goldlt)!important;
  outline-offset:2px!important;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(201,162,74,.25)!important;
}
.cmplz-cookiebanner .cmplz-slider{background:#4A4E55!important}
.cmplz-cookiebanner input:checked + .cmplz-slider,
.cmplz-cookiebanner .cmplz-slider.cmplz-active{background:var(--dd-gold)!important}
.cmplz-cookiebanner .cmplz-divider{border-color:rgba(201,162,74,.25)!important}

/* ==========================================================================
   BANNER
   ========================================================================== */

.dd-banner{margin:8px 0 0}
.dd-banner img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(201,162,74,.6);border-radius:1px;
}
.dd-banner figcaption{text-align:center;margin-top:12px}

/* ==========================================================================
   WORDMARK LOGO
   Text stays in the markup for accessibility and SEO, indented off-screen,
   swapped visually for the artwork. To revert to plain text, delete this block.
   ========================================================================== */

:root{--dd-logo:url(/wp-content/uploads/2026/09/dd-wordmark-2026-09.webp)}
.site-branding:not(.mobile-site-branding) .site-title{
  display:inline-block;
  background-image:var(--dd-logo);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  height:clamp(72px,13.5vw,156px);
  aspect-ratio:2000/489;width:auto;
  text-indent:-9999px;overflow:hidden;
  /* no CSS shadow: the artwork carries its own (Neil, 26 Sept 2026) */
}
.mobile-site-branding .site-title{
  display:inline-block;
  background-image:var(--dd-logo);
  background-repeat:no-repeat;background-position:left center;background-size:contain;
  height:51px;aspect-ratio:2000/489;width:auto;
  text-indent:-9999px;overflow:hidden;
}

/* ==========================================================================
   READING SCRIMS

   The glass is bright now, and bright glass and body text cannot share the
   same pixels. Every block of running text gets a soft dark pane behind it,
   masked at the edges so it reads as smoked glass rather than a box stuck on
   top. Headings that sit directly on glass get a shadow instead, because
   they are large enough to carry it.
   ========================================================================== */

.dd-hero-cols>.wp-block-column:first-child,
.dd-crafts-cols .wp-block-column,
.dd-collections>p,
.dd-page-hero .dd-eyebrow,
.dd-noai-text,
.dd-sec-intro,
.dd-lede-centre,
.dd-measure,
.dd-policy-list,
.dd-social-line,
.entry-content figcaption,
.dd-gcta p,.dd-gcta h2,
.dd-note,
.dd-socials p,
.dd-commissions p,
.dd-grid figcaption,
.dd-vids figcaption,
.dd-card-title,
.dd-card-meta,
.dd-caption{
  position:relative;
  isolation:isolate;
}

.dd-hero-cols>.wp-block-column:first-child::before,
.dd-crafts-cols .wp-block-column::before,
.dd-collections>p::before,
.dd-page-hero .dd-eyebrow::before,
.dd-noai-text::before,
.dd-sec-intro::before,
.dd-lede-centre::before,
.dd-measure::before,
.dd-policy-list::before,
.dd-social-line::before,
.entry-content figcaption::before,
.dd-gcta p::before,.dd-gcta h2::before,
.dd-note::before,
.dd-socials p::before,
.dd-commissions p::before,
.dd-grid figcaption::before,
.dd-vids figcaption::before,
.dd-card-title::before,
.dd-card-meta::before,
.dd-caption::before{
  content:"";
  position:absolute;
  inset:-.7rem -1rem;
  z-index:-1;
  background:rgba(5,7,10,.72);
  border-radius:3px;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  pointer-events:none;
}

/* The hero copy carries the most text, so it gets a fuller pane. The top
   feather is tightened because the eyebrow sits right on the upper edge and
   was landing in the fade at 2.77:1 on a phone. */
.dd-hero-cols>.wp-block-column:first-child::before{
  inset:-2.4rem -1.7rem -1.4rem;
  background:rgba(5,7,10,.76);
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 4%,#000 93%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 4%,#000 93%,transparent 100%);
}

/* Captions, meta and eyebrows are small text. They get a plain rounded scrim
   with no radial mask: on a two-line caption the mask left the corners faded
   and bright glass came through at 1.66:1. */
.dd-caption::before,.dd-card-meta::before,
.entry-content figcaption::before,
.dd-grid figcaption::before,.dd-vids figcaption::before{
  inset:-.4rem -.8rem;
  background:rgba(5,7,10,.88);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-over;
  mask-composite:add;
  border-radius:2px;
}

/* display type is heavy enough to sit on glass with a shadow alone */
.dd-h1,.dd-h1-page,.dd-noai-title,.dd-section-title,
h1.entry-title,.post-archive-title h1,.dd-craft-title,.dd-social-name{
  text-shadow:0 2px 10px rgba(5,7,10,.95),0 1px 30px rgba(5,7,10,.8);
}

/* ==========================================================================
   FOOTER: FOUR COLUMNS

   Kadence renders three widget areas and the customiser controls that count,
   but publishing a customiser change is what has unassigned the footer
   widgets before. So the fourth column is made here instead: the third
   widget holds two groups, and flattening its wrappers with display:contents
   promotes both to grid items of the footer row itself.

   Result left to right: Letters | Explore | Legal | Elsewhere.
   Order comes from the DOM, so Legal is placed first inside the widget.
   ========================================================================== */

.site-middle-footer-inner-wrap.site-footer-row-columns-3{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.site-footer-middle-section-3,
.site-footer-middle-section-3 > .footer-widget-area,
.site-footer-middle-section-3 .footer-widget-area-inner,
.site-footer-middle-section-3 .widget_block{
  display:contents!important;
}
.dd-foot-group{min-width:0}

/* Homepage only: its own "Letters from the Studio" section already has the
   sign-up, so the footer copy is hidden there and the row closes up to three
   columns on desktop. Every other page keeps the footer sign-up. */
.home .site-footer-middle-section-1{display:none!important}
@media (min-width:1025px){.home .site-middle-footer-inner-wrap.site-footer-row-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

@media (max-width:1024px){
  .site-middle-footer-inner-wrap.site-footer-row-columns-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:719px){
  .site-middle-footer-inner-wrap.site-footer-row-columns-3{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* ==========================================================================
   PER-PAGE ADJUSTMENTS
   Scoped by body class so page content stays untouched and a theme switch
   still undoes everything cleanly.
   ========================================================================== */

/* Fur disclosure (page 390): drop the photo and its text 3cm down the page,
   together, so the two stay level. Requested at every width, phones included.
   Written in cm deliberately: it is what was asked for, and CSS maps 3cm to
   113.4px at the standard 96dpi. */
.page-id-390 .entry-content > .wp-block-media-text{
  margin-top:3cm;
}

/* Pages that open straight into text sat flush against the header, with a
   measured gap of exactly 0px: .content-container has its top padding zeroed,
   which is right for pages opening with a hero and wrong for these.
   The clamp is the same one .dd-page-hero uses, so a policy page now starts
   at the same height as the Gallery or the Store.
   Scoped by page id on purpose. "First child is not a hero" would have been
   tidier but also catches the homepage (.dd-hero) and the Store
   (.dd-collections), both of which are already spaced correctly.
   Page 390 is not in this list: its photo keeps its own deliberate 3cm. */
.page-id-3 .entry-content > *:first-child,
.page-id-11 .entry-content > *:first-child,
.page-id-13 .entry-content > *:first-child,
.page-id-233 .entry-content > *:first-child{
  margin-top:clamp(2.4rem,5vw,4rem);
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:781px){
  :root{--glass-strength:.26}
  .dd-hero{padding-top:1.6rem}
  .dd-hero::before{top:-56px;width:172%;height:calc(100% + 96px)}
  .dd-hero::after{background-size:clamp(96px,26vw,150px) auto}
  .wp-block-columns{gap:1.5rem!important}
  .dd-hero-cols{flex-direction:column-reverse!important;gap:1.8rem}
  .dd-hero-cols .wp-block-column{flex-basis:auto!important}
  .dd-hero-cols .dd-frame img{max-width:262px!important;margin-left:auto;margin-right:auto}
  .dd-h1{font-size:2.15rem!important}
  .dd-noai-title{font-size:1.95rem!important;max-width:none}
  .dd-crafts-cols,.dd-cards{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:1.5rem 1.1rem!important;
  }
  .dd-crafts-cols .wp-block-column,.dd-cards .wp-block-column{flex-basis:auto!important;width:auto!important}
  .dd-crafts-cols .wp-block-column{border-left:0;padding-left:0}
  .dd-cards{padding:1.1rem .9rem 1.2rem}
  .dd-card-title{font-size:.98rem}
  .dd-studio-cols{flex-direction:column!important;gap:1.6rem!important}
  .dd-studio-cols .wp-block-column{flex-basis:auto!important}
  .dd-studio-cols .dd-frame img,.dd-studio-cols .dd-caption{max-width:300px}
  .dd-signup-form{flex-direction:column}
  .dd-join{width:100%}
  .site-title{letter-spacing:.16em}
  .header-html{letter-spacing:.2em;font-size:.6rem}
  .dd-section-title{font-size:1.62rem!important;padding-top:2.4rem}
  .dd-studio,.dd-featured,.dd-crafts,.dd-signup{padding-top:.5rem}
  .dd-hero,.dd-crafts,.dd-featured,.dd-studio,.dd-signup{padding-left:20px;padding-right:20px}
  .site-footer{text-align:center}
  .site-footer .dd-signup-form{flex-direction:column}
  .site-footer .dd-signup-note{text-align:center!important}
  .dd-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.2rem .9rem!important}
  .dd-vids{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:1.2rem .9rem!important}
  .dd-vids .wp-block-column{flex-basis:auto!important;width:auto!important}
  .dd-grid figcaption,.dd-vids figcaption{font-size:.72rem!important}
  .dd-jump .wp-block-button__link{font-size:.62rem!important;padding:.62rem 1rem!important}
  .dd-h1-page{font-size:1.95rem!important}
  .dd-social-grid{grid-template-columns:repeat(2,1fr)!important;gap:.9rem!important}
  .dd-social-grid .wp-block-column{padding:1.1rem 1rem}
  .dd-social-name{font-size:1.12rem!important}
  .dd-social-line{font-size:.85rem}
  .dd-social-grid .wp-block-column:nth-child(2n+1):last-child{grid-column:1/-1;max-width:calc((100% - .9rem)/2);margin-inline:auto}
  .dd-feedgrid{grid-template-columns:repeat(3,1fr)!important;gap:.6rem!important}
  .dd-feedgrid figcaption{display:none}
  .single .entry-content h2{font-size:1.4rem!important;margin-top:2.1rem!important}
  .single .entry-content p{font-size:1rem}
  .dd-lede-post{font-size:1.08rem!important}
  .loop-entry .entry-content-wrap{padding:1.2rem!important}
  .single .post-thumbnail img,.single .post-thumbnail-inner{max-width:280px!important}
  .wpforms-container .wpforms-field-label{font-size:.63rem!important}
  .dd-sub-left{font-size:1.08rem!important}
  .dd-policy-h{font-size:1.28rem!important}
}

@media (min-width:782px){
  .single .content-container,.single .entry-content{padding-left:24px!important;padding-right:24px!important}
}

@media (max-width:430px){
  .dd-hero-cols .wp-block-column:last-child{max-width:78%;margin:0 auto}
}

/* iOS and older Safari do not paint fixed backgrounds smoothly while scrolling */
@supports (-webkit-touch-callout:none){
  body::before,body::after{position:absolute;height:100%;min-height:100vh}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}