/* Crimson Owl Accountants | custom.css */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The palette - change a colour here and the whole site follows */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root
{
    --colour1: #ba1729;
    --colour2: #e9ced1;
    --colour3: #84101d;
    --colour4: #f9ecee;
    --colour5: #222222;

    /* white or near-black, whichever reads on the fill */
    --on-colour1: #ffffff;
    --on-colour2: #111111;

    /* the roles the pieces use */
    --ink: var( --colour3 );
    --ink-soft: color-mix( in srgb, var( --colour3 ) 93%, #fff );
    --accent: var( --colour1 );
    --accent-text: var( --colour1 );
    --accent-dark: var( --colour1 );
    --on-accent: var( --on-colour1 );
    --on-accent-dark: var( --on-colour1 );
    --tint: var( --colour4 );
    --tint-line: color-mix( in srgb, var( --colour4 ) 88%, var( --colour3 ) );

    --text: var( --colour5 );
    --text-soft: color-mix( in srgb, var( --colour5 ) 85%, #fff );
    --text-muted: color-mix( in srgb, var( --colour5 ) 68%, #fff );

    /* white - change these, never a #fff further down */
    --paper: #fff;                              /* cards, panels, light buttons */
    --on-ink: #fff;                             /* text and icons on the dark */
    --on-ink-soft: rgba( 255, 255, 255, .8 );   /* body copy on the dark */
    --on-ink-muted: rgba( 255, 255, 255, .68 ); /* small print, outline buttons */

    /* see-through black, laid over the page or a photograph */
    --shade-faint: rgba( 0, 0, 0, .05 );        /* a wash, the lightest shadow */
    --shade-light: rgba( 0, 0, 0, .1 );         /* hairlines, soft shadows */
    --shade: rgba( 0, 0, 0, .28 );              /* lifted cards, dotted leaders */
    --shade-deep: rgba( 0, 0, 0, .45 );         /* over photographs, deep shadows */

    /* see-through white, on the dark */
    --glow-faint: rgba( 255, 255, 255, .06 );   /* a panel on the dark */
    --glow-line: rgba( 255, 255, 255, .14 );    /* hairlines */
    --glow: rgba( 255, 255, 255, .3 );          /* dotted leaders */
    --glow-edge: rgba( 255, 255, 255, .6 );     /* button outlines on hover */
}


/* - - - a heading group - - - */

/* h1 or h2, with the business name or a strapline as an h3 under it, and a
   thin rule to close the group off */

/* - centred text: section headings over a grid, intros, the final CTA - */

.piece-centre :is( h1, h2, h3, h4, p )
{
    justify-self: center;
    text-align: center;
}

/* - a readable line length for centred or full-width text - */

.piece-narrow
{
    width: 100%;
    max-width: 720px;
    justify-self: center;
}

/* - the line under a heading that sets the page up - */

.piece-lead
{
    font-size: 1.18em;
    line-height: 1.6;
    opacity: .9;
}

/* - - - a picture inside a piece - - - */

/* Alchemy's .img centres and scales; these round it off and stop a tall
   photograph running away with the row. */

.piece-shot
{
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var( --piece-radius-media, 12px );
}

.piece-shot img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* a shot fills its column - in a narrow one it should not shrink to the
   picture's own width */
.piece-split > .element > .piece-shot
{
    width: 100%;
}

/* - */

/* copy beside a picture sits in the middle of it, not at the top */

.piece-split
{
    align-items: center;
}

@media( min-width: 768px )
{
    .piece-split-fill
    {
        align-items: stretch;
    }

    .piece-split-fill > .element.a4
    {
        align-self: center;
    }

    .piece-split-fill > .element:not( .a4 ),
    .piece-split-fill > .element:not( .a4 ) > .piece-media
    {
        display: grid;
    }

    .piece-shot-fill
    {
        position: relative;
        height: 100%;
        min-height: 280px;
        aspect-ratio: auto;
    }

    .piece-shot-fill img
    {
        position: absolute;
        inset: 0;
    }
}

/* - - - coloured sections meet flush - - - */

/* Each template's core.css spaces the page's sections with a grid gap
   ( 32px; Pigeon none ). Between a white section and anything else the
   gap is white on white and goes unseen, but between two sections that
   both carry their own colour or photograph - a tint beside a dark band,
   a photo band beside a cover - it showed as a white stripe. Those meet
   flush: the second is pulled up by the gap. --page-gap is the template's
   gap; a skin with a different one sets it. */

#page-content > section:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ) + section:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ),
#page-content > section.piece-dark-alt + section.piece-dark,
#page-content > section.piece-dark + section.piece-dark-alt
{
    margin-top: calc( var( --page-gap, 32px ) * -1 );
}

/* The same at the foot of a page. The page content keeps some space under
   its last section ( 32 to 75px, by template ) before the footer - unseen
   under a white section, but under a tint, a band or a photograph it was a
   white bar between that and the footer. A coloured last section runs
   straight into the footer instead. */

#page-content:has( > section:last-of-type:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ) )
{
    padding-bottom: 0;
}

/* - - - a bullet list - - - */

/* Alchemy resets p and li margins, so a list needs its marker back. The
   marker is drawn here rather than by the browser so it takes the accent
   and lines up with wrapped lines. */

/* - the templates' own list: a div of paragraphs, <div class="list">,
     each a grid of two - the mark, then the words ( a line with bold and
     plain words keeps them in one <span> ). Each template's core.css sets
     the grid, the gap and the colour; the :where() rules here are only a
     fall-back for a template with no list of its own ( Pigeon ), weaker
     than any template rule. -

   The mark: the templates draw it as a Font Awesome character in
   ::before, but the sites load Font Awesome as SVG scripts, which leave
   ::before alone - so the mark only showed on a computer with the Font
   Awesome font installed. It is drawn here instead, the same light
   chevron, as a mask in the template's own colour, so it shows
   everywhere. */

:where( .list )
{
    display: grid;
    grid-gap: 8px;
    align-content: center;
}

:where( .list ) > p
{
    display: grid;
    grid-template-columns: max-content auto;
    align-content: center;
}

:where( .list ) > p::before
{
    color: var( --accent );
}

div.list > p::before
{
    content: "";
    align-self: start;
    width: 10px;
    height: 16px;
    margin: .3em 14px 0 0;
    padding: 0;

    font-size: 16px;
    border: none;

    background-color: currentColor;

    -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M315.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-208 208c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L281.4 256 84.7 59.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l208 208z'/%3E%3C/svg%3E" ) no-repeat center / contain;
    mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M315.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-208 208c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L281.4 256 84.7 59.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l208 208z'/%3E%3C/svg%3E" ) no-repeat center / contain;
}

/* on a band or a dark page the mark takes the accent as it reads on the dark */
:is( .piece-band, .piece-band-image, .piece-dark ) div.list > p::before
{
    color: var( --accent-dark );
}

/* - - - buttons - - - */

/* An <a>, never a <button> inside one. Two at most, side by side. */

.piece-btn
{
    display: grid;
    justify-self: start;
    padding: 14px 32px;

    background-color: var( --accent );
    border: solid 1px var( --accent );
    border-radius: var( --piece-radius-btn, 32px );
    text-decoration: none;

    transition: ease all .3s;
}

.piece-btn :is( h4, p, span )
{
    margin: 0;

    color: var( --on-accent );
    text-align: center;
}

.piece-btn:hover
{
    transform: translateY( -2px );
    box-shadow: 0 12px 24px -12px var( --shade-deep );
}

/* - inside a band, the solid one turns white so it cannot vanish - */

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn
{
    background-color: var( --paper );
    border-color: var( --paper );
}

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn :is( h4, p, span )
{
    color: var( --ink );
}

/* - */

.piece-btn-row
{
    display: grid;
    grid-gap: 16px;
    justify-content: start;
}

/* a row of buttons under a heading or text needs more than the 16px the
   grid gives everything else, or it reads as part of the line above */
* + .piece-btn-row
{
    margin-top: 12px;
}

.piece-centre .piece-btn-row,
.piece-centre .piece-btn
{
    justify-content: center;
    justify-self: center;
}

/* - - - a divider, for pages with no bands - - - */

/* - */

@media( min-width: 768px )
{
    .piece-btn-row
    {
        grid-auto-flow: column;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Set pieces - the designed layer */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The pieces that make a page look designed rather than assembled:
   hierarchy ( eyebrow, display heading, lead ), framed imagery, numbers
   and steps, refined cards, option cards, a softer tinted band, photo
   covers and the call-to-action banner. */

/* - - - hierarchy - - - */

/* a short label over a heading - spaced capitals and a rule leading in */

/* - a heading that sets a section, larger and tighter than the
     template's default - */

.piece-display
{
    font-size: clamp( 32px, 4.2vw, 54px );
    line-height: 1.08;
    letter-spacing: -.02em;
}

h2.piece-display
{
    font-size: clamp( 28px, 3.4vw, 46px );
    line-height: 1.12;
}

/* long words in big, tracked headings wrap rather than overflow a phone */
.piece-display
{
    overflow-wrap: break-word;
}

/* a heading block for a section: eyebrow, heading, lead - centred and
   kept to a readable width */
.piece-intro
{
    display: grid;
    grid-gap: 16px;
    justify-items: center;
    justify-self: center;
    width: 100%;
    max-width: 760px;

    text-align: center;
}

.piece-intro :is( h1, h2, h3, p )
{
    justify-self: center;
    text-align: center;
}

/* - - - more on the cards - - - */

/* The card family. Every card is the same HTML on every template; the
   skins give them the template's surface - its corners, border or
   shadow, tint or white, brackets or bars - by listing these classes
   with .piece-card in their card rules.

     service cards      .piece-card, with an icon, a price and a link
     price cards        .piece-option, with a price per period and ticks
     product cards      .piece-product
     info / stat cards  .piece-stats.piece-stats-cards
     team cards         .piece-member
     testimonial cards  .piece-testimonial
     category cards     .piece-category ( a link to another page )
     article cards      .piece-article ( a link to a post )

   See section 7 of assets/claude/page-rules.md for when each is used. */

/* - card titles: the heading font at its regular weight, whatever the
     template does with h3 - */

:is( .piece-card, .piece-option, .piece-product, .piece-member, .piece-category, .piece-article ) :is( h3, h4 )
{
    font-size: 20px;
    font-weight: var( --heading-regular, 600 );
    line-height: 1.3;
}

/* - the shared surface of the newer cards - */

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat )
{
    position: relative;
    display: grid;
    align-content: start;
    box-sizing: border-box;
    overflow: hidden;

    text-align: left;
    text-decoration: none;

    background-color: var( --paper );
    border: solid 1px var( --shade-light );
    border-radius: var( --piece-radius-card, 16px );
    box-shadow: 0 1px 2px var( --shade-faint );

    transition: ease all .3s;
}

/* the ones that are links lift a little */
:is( a.piece-category, a.piece-article, .piece-product ):hover
{
    transform: translateY( -4px );
    box-shadow: 0 24px 48px -26px var( --shade );
}

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article ) :is( h3, h4 )
{
    margin: 0;

    color: var( --ink );
}

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article ) p
{
    margin: 0;

    color: var( --text-soft );
}

/* a picture across the top of a card, edge to edge */
:is( .piece-product, .piece-member, .piece-category, .piece-article ) > .piece-shot
{
    width: 100%;
    border-radius: 0;
}

/* - - - service cards: icons, prices, links, dark and tinted - - - */

/* the icon: a small tile of the tint, top left - or riding the photo's
   lower edge on a picture card */
:is( .piece-card, :where( .piece-stats-cards ) > .piece-stat ) > :is( i, svg )
{
    justify-self: start;
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 13px;

    font-size: 26px;
    color: var( --accent );

    background-color: var( --tint );
    border-radius: var( --piece-radius-icon, 50% );
}

/* - - - category cards - - - */

/* An overview that sends people on: each card a link to one of the
   site's own pages - a photo, an icon, the name, an optional count from
   the copy, and an arrow. */

:is( .piece-category-body, .piece-article-body )
{
    position: relative;
}

:is( .piece-category-body, .piece-article-body )::after
{
    content: "\2192";
    position: absolute;
    right: 20px;
    bottom: 16px;

    font-size: 18px;
    line-height: 1;
    color: var( --ink );

    transition: ease transform .3s;
}

:is( .piece-category, .piece-article ):hover :is( .piece-category-body, .piece-article-body )::after
{
    transform: translateX( 4px );
}

/* - - - the tinted band - - - */

/* A pale wash of the accent - for a section that wants separating
   without the weight of a dark band. Up to two of these a page. */
.piece-band-tint
{
    padding: 80px 0;

    background-color: var( --tint );
}

/* - - - photo covers - - - */

/* A photograph across the full width with the words over it, under a
   wash of the dark. The picture is a real <img> - the client's own -
   laid behind the content:

     <section class="piece-cover">
         <img class="piece-cover-img" src="assets/img/src/…" alt="…" >
         <div class="workspace …"> … </div>
     </section>

   .piece-cover-left washes from the left, for text on the left. */

.piece-cover
{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 0;

    background-color: var( --ink );
}

.piece-cover-img
{
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.piece-cover::before
{
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    background-image: linear-gradient( 180deg, var( --ink )cc 0%, var( --ink )e6 100% );
}

.piece-cover :is( h1, h2, h3, h4, b )
{
    color: var( --on-ink );
}

.piece-cover :is( p, li )
{
    color: var( --on-ink-soft );
}

.piece-cover .piece-eyebrow,
.piece-cover :is( .piece-accent, .piece-second ),
.piece-band :is( .piece-accent, .piece-second ),
.piece-band-image :is( .piece-accent, .piece-second )
{
    color: var( --accent-dark );
}

/* - - - the ornament before the close - - - */

/* A short line, a small trade icon, a short line - a quiet full stop
   between two sections, always the one before the close. It has a
   section of its own:

     <section class="piece-divide">
         <div class="workspace">
             <div class="element piece-divider">
                 <i class="fa-light fa-border-all"></i>
             </div>
         </div>
     </section>

   The section takes a little space back from the sections either side,
   and sits exactly halfway between them. */
/* pulled in a little, so it sits closer to both neighbours */

/* a second heading further down the same text column ( "Why choose us"
   under "Services" on a short page ) gets room above it */
.piece-split .element > :is( h2, h3 ).piece-display:not( :first-child )
{
    margin-top: 24px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Dark pages */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* For a brand that is dark at heart - charcoal, black, slate, a deep
   navy logo on a dark template - every section of the page carries
   .piece-dark, alternating with .piece-dark .piece-dark-alt for rhythm.
   The pieces inside turn themselves over: light text, the accent as it
   shows on the dark, cards as faint panels, the featured option and the
   floating card in white so they still lift.

   When every section is dark ( a photo cover counts ), #page-content goes
   dark too, so the gaps the template leaves between sections do not show
   as white stripes. */

#page-content:has( > section.piece-dark ):not( :has( > section:not( .piece-dark, .piece-cover ) ) )
{
    background-color: var( --ink );
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Wider and narrower screens */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media( min-width: 768px )
{

    .piece-cover
    {
        padding: 140px 0;
    }
}

/* on a phone the floating card drops under the picture, and the dark
   sections take a little less air */
@media( max-width: 767px )
{

    .piece-cover
    {
        padding: 88px 0;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Template parts */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The testimonials section's tint: a fill laid over the background photo
   and under the reviews, covering everything the photo covers - both grid
   rows ( the reviews and the dots under them ) and the container's own
   padding.

   It is taken out of the grid and pinned to all four edges of the
   container, which becomes its positioning box. isolation gives the
   container a stacking context of its own, so z-index -1 puts the fill
   above the container's background ( the photo ) but below everything in
   it - the reviews, the arrows and the dots - whatever their own z-index.
   var( --ink ) at .7 keeps white text readable on any photo. */

.testimonial-container
{
    position: relative;

    isolation: isolate;
}

.testimonial-fill
{
    position: absolute;

    z-index: -1;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: var( --ink );

    opacity: .7;

    pointer-events: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The footer's Privacy Policy link */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Every template prints it after the copyright line ( switched off in
   Site style on the Details step, it is commented out ). Kept whole on a
   phone, and
   underlined, so it reads as a link even where it shares the line's
   colour. */
/* !important, as each footer styles its links by id ( #bottom-bar a ) */
a[ href="gdpr.php" ]
{
    white-space: nowrap !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
}

a[ href="gdpr.php" ]:hover
{
    text-decoration-thickness: 2px !important;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Skin - Pigeon: dark, moody and editorial ( provisional ) */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Pigeon is still in development - this follows what it has so far:
   square panels that float on a deep shadow, outline pill buttons,
   tracked capitals without rules. Revisit once the template settles. */

:root
{
    --piece-radius-media: 0;
    --piece-radius-card: 0;
    --piece-radius-btn: 24px;
    --piece-radius-icon: 50%;

    /* Pigeon's sections sit with no gap between them */
    --page-gap: 0px;

    /* the template font's heading weights - a chosen heading font
       sets its own */
    --heading-light: 300;
    --heading-regular: 500;
    --heading-strong: 700;
    --heading-italic: normal;
}

/* - panels float on a deep shadow - */

:is( .piece-card, .piece-step, .piece-option, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat, .piece-feature )
{
    border-color: transparent;
    box-shadow: 0 22px 40px -18px var( --shade-deep );
}

.piece-split .piece-shot
{
    box-shadow: 0 22px 40px -18px var( --shade-deep );
}

/* - - - the buttons: Pigeon's arrow button - - - */

/* The button from the two example sites: a filled pill with a white
   circle at its start holding a diagonal arrow. On hover the pill goes
   dark, the arrow flies out of the circle's corner and a fresh one slides
   in behind it. The second button of a pair ( .piece-btn-alt ) is the
   quieter outline pill, without the circle.

   The markup is the builder's plain <a class="piece-btn"><span>…</span></a>
   ( or an older page's <h4> ): the circle is ::before, the two arrows are
   one ::after masked twice, so nothing extra goes in the HTML.

   One set of rules paints every button - in the page and in the home
   banner - and each place only says which colours to use:

     --btn-bg / --btn-fill     the fill at rest / on hover
     --btn-line                the outline ( the fill's own colour on the
                               arrow button )
     --btn-text / --btn-on     the words at rest / on hover
     --btn-dot / --btn-dot-on  the circle at rest / on hover
     --btn-arrow / --btn-arrow-on  the arrow at rest / on hover

   Scoped to #page-content and the banner so it outranks the shared
   per-section button rules without a pile of !importants. */

.piece-btn
{
    --btn-bg: var( --accent );
    --btn-line: var( --accent );
    --btn-text: var( --on-accent );
    --btn-fill: var( --ink );
    --btn-on: var( --on-ink );
    --btn-dot: var( --on-ink );
    --btn-dot-on: var( --on-ink );
    --btn-arrow: var( --accent );
    --btn-arrow-on: var( --ink );
}

/* on the dark, a band, a photo, the call-to-action banner and the home
   banner: the accent as it reads on dark, white on hover */
:is( .piece-dark, .piece-band, .piece-band-image, .piece-cover, .piece-cta-panel, .piece-cta-band, .hero-content ) .piece-btn
{
    --btn-bg: var( --accent-dark );
    --btn-line: var( --accent-dark );
    --btn-text: var( --on-accent-dark );
    --btn-fill: var( --paper );
    --btn-on: var( --ink );
    --btn-dot: var( --on-ink );
    --btn-dot-on: var( --ink );
    --btn-arrow: var( --accent-dark );
    --btn-arrow-on: var( --on-ink );
}

/* - the one set of rules that paints them - */

:is( #page-content, .hero-content ) .piece-btn
{
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-gap: 12px;
    align-items: center;
    justify-content: center;

    padding: 7px 26px 7px 7px;

    background-color: var( --btn-bg );
    border: solid 2px var( --btn-line );
    border-radius: var( --piece-radius-btn, 24px );
    box-shadow: none;

    transition: background-color .3s ease, border-color .3s ease;
}

/* the circle */
:is( #page-content, .hero-content ) .piece-btn::before
{
    content: "";
    grid-column: 1;
    grid-row: 1;

    width: 30px;
    height: 30px;

    background-color: var( --btn-dot );
    border-radius: 50%;

    transition: background-color .3s ease;
}

/* the arrows, in the circle's own cell so they ride with it however wide
   the button: one at rest, its copy waiting below-left; on hover the first
   leaves by the top-right corner as the copy comes in */
:is( #page-content, .hero-content ) .piece-btn::after
{
    content: "";
    grid-column: 1;
    grid-row: 1;

    width: 30px;
    height: 30px;

    background-color: var( --btn-arrow );
    border-radius: 50%;

    -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z'/%3E%3C/svg%3E" ) no-repeat 10px 9px / 11px 12px, url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z'/%3E%3C/svg%3E" ) no-repeat -14px 33px / 11px 12px;
    mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z'/%3E%3C/svg%3E" ) no-repeat 10px 9px / 11px 12px, url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z'/%3E%3C/svg%3E" ) no-repeat -14px 33px / 11px 12px;

    transition: background-color .3s ease, -webkit-mask-position .3s ease-in-out, mask-position .3s ease-in-out;
}

:is( #page-content, .hero-content ) .piece-btn :is( h4, p, span )
{
    margin: 0;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var( --btn-text );
    opacity: 1;

    grid-column: 2;
    grid-row: 1;

    transition: color .3s ease;
}

/* the shared banner rule's text arrow - the circle says it here */
:is( #page-content, .hero-content ) .piece-btn :is( h4, span )::after
{
    content: none;
}

:is( #page-content, .hero-content ) .piece-btn:is( :hover, :focus-visible )
{
    background-color: var( --btn-fill );
    border-color: var( --btn-fill );
    box-shadow: none;
    transform: none;
}

:is( #page-content, .hero-content ) .piece-btn:is( :hover, :focus-visible )::before
{
    background-color: var( --btn-dot-on );
}

:is( #page-content, .hero-content ) .piece-btn:is( :hover, :focus-visible )::after
{
    background-color: var( --btn-arrow-on );

    -webkit-mask-position: 36px -15px, 10px 9px;
    mask-position: 36px -15px, 10px 9px;
}

:is( #page-content, .hero-content ) .piece-btn:is( :hover, :focus-visible ) :is( h4, p, span )
{
    color: var( --btn-on );
}

:is( #page-content, .hero-content ) .piece-btn:focus-visible
{
    outline: solid 2px var( --btn-bg );
    outline-offset: 4px;
}

/* a phone: the words a touch smaller, so a long label still fits */
@media( max-width: 479px )
{
    :is( #page-content, .hero-content ) .piece-btn :is( h4, p, span )
    {
        font-size: 13px;
        letter-spacing: .14em;
    }
}

@media( prefers-reduced-motion: reduce )
{
    :is( #page-content, .hero-content ) .piece-btn::after
    {
        transition: background-color .3s ease;
    }
}

/* - - - headings: editorial capitals ( provisional ) - - - */

/* Big, tight capitals with a little air between the letters, like a
   magazine cover line. The second half of a two-part heading turns
   lighter and quieter on its own line rather than changing colour, so
   the dark pages keep their mood. Revisit with the rest of the skin. */

.piece-display
{
    font-weight: var( --heading-strong );
    line-height: 1.04;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* - - - lists: the builder's own, with Pigeon's mark - - - */

/* The example sites tick every item with a solid circle-check in the
   accent. The builder's list ( div.list > p ) and the two-column
   checklist take the same mark here - drawn as a mask, like the shared
   chevron, so it shows without the icon font. */

div.list
{
    grid-gap: 12px;
}

div.list > p::before
{
    width: 20px;
    height: 20px;
    margin: .25em 14px 0 0;

    -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E" ) no-repeat center / contain;
    mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E" ) no-repeat center / contain;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* One-off tweaks for this site go below */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */