/* additional.css */

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

/* Set pieces this site does not use */

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

/* Split off custom.css when the site was built: the rules here are for
   pieces and classes no page on the site has, so custom.css holds only
   what is in use. This sheet is linked on every page just ahead of
   custom.css, so a piece added to a page later is still styled - move
   its rules across into custom.css when that happens, or edit them
   here. Change the colours in custom.css's :root, not here. */


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

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

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


/* - - - 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 */

.piece-heading
{
    display: grid;
    grid-gap: 8px;
    width: 100%;
    padding-bottom: 16px;

    border-bottom: solid 1px var( --accent );
}

.piece-heading h3
{
    color: var( --accent-text );
}

.piece-centre.piece-heading,
.piece-centre .piece-heading,
.piece-intro .piece-heading
{
    border-bottom: none;
}

/* a heading pair opening a centred section sits centred, as one */
.piece-intro .piece-heading
{
    justify-items: center;
    padding-bottom: 0;
}

/* - - - 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. */

/* - the same frame in two more shapes, so a picture beside text can be
     matched to how much text there is - see "Balancing a split" in
     assets/claude/page-rules.md -

     wide ( 16:9 ):  beside a short block, so the picture does not tower
     tall ( 4:5 ):   in the narrow third of a col-2a / col-2b, beside a
                     long block, so the picture holds its own height */

.piece-shot-wide
{
    aspect-ratio: 16 / 9;
}

.piece-shot-tall
{
    aspect-ratio: 4 / 5;
}

/* - two more frames: square, and fill. Fill is the page builder's
     default - the picture takes the whole height of the copy beside it,
     so the two columns mirror each other. Stacked on a phone it falls
     back to 4:3 - */

.piece-shot-square
{
    aspect-ratio: 1 / 1;
}

/* - - - bands - - - */

/* A full-width dark section. Every other section at most, and never two
   side by side. var( --ink ), not the raw secondary colour - a light grey
   secondary used to put white text on light grey. */

.piece-band
{
    padding: 64px 0;

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

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

/* - the same, over a photograph - assets/img/src/band.jpg when there is
     one, the dark underneath when there is not - */

.piece-band-image
{
    padding: 64px 0;

    background-color: var( --ink );
    background-image: linear-gradient( var( --shade-deep ), var( --shade-deep ) ), url( "../img/src/band.jpg" );
    background-position: center center;
    background-size: cover;
}

.piece-band-image :is( h1, h2, h3, h4, p, li, b, blockquote )
{
    color: var( --on-ink );
}

/* - - - boxes - - - */

/* align-content stops a short box spreading its lines out to match the
   tallest one in the row */

.piece-box
{
    align-content: start;
    padding: 32px;
    box-sizing: border-box;

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

    transition: ease all .3s;
}

.piece-box:hover
{
    transform: translateY( -6px );
}

.piece-box :is( h2, h3, h4, p, li )
{
    color: var( --text );
}

.piece-box h3
{
    color: var( --accent-text );
}

/* - the dark box, for a band - */

.piece-box-dark
{
    background-color: var( --ink );
    box-shadow: 0 4px 16px var( --shade );
}

.piece-box-dark :is( h2, h4, p, li )
{
    color: var( --on-ink );
}

.piece-box-dark h3
{
    color: var( --accent-dark );
}

.piece-band .piece-box-dark,
.piece-band-image .piece-box-dark
{
    background-color: var( --shade-deep );
}

/* - - - 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. */

.piece-list
{
    display: grid;
    grid-gap: 8px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.piece-list li
{
    position: relative;
    display: block;
    padding-left: 28px;
}

/* The marker sits in the padding rather than in a grid column of its
   own: a line that mixes bold and plain words ( "<b>Term:</b> what it
   means" ) must stay one run of text, and a grid would split it into
   separate cells. */
.piece-list li::before
{
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;

    font-weight: 700;
    color: var( --accent );
}

/* - */

.piece-list-chevron li::before
{
    content: "\203A";
    top: .05em;

    font-size: 1.4em;
    line-height: 1;
}

/* - - - a pulled-out quote - - - */

.piece-quote
{
    align-content: start;
    margin: 0;
    padding: 24px 24px 24px 28px;
    box-sizing: border-box;

    border-left: solid 3px var( --accent );
    border-radius: 0 15px 15px 0;
    background-color: var( --shade-faint );
}

.piece-quote p
{
    font-style: italic;
}

.piece-quote-who
{
    font-style: normal;
    font-weight: 600;
    opacity: .8;
}

.piece-band .piece-quote,
.piece-band-image .piece-quote
{
    background-color: var( --glow-faint );
}

/* - - - buttons - - - */

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

/* - */

.piece-btn-alt
{
    background-color: transparent;
}

.piece-btn-alt :is( h4, p, span )
{
    color: var( --accent-text );
}

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn-alt
{
    background-color: transparent;
    border-color: var( --on-ink-muted );
}

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

/* - - - a row of logos - accreditations, trade bodies - - - */

.piece-logos img
{
    max-height: 96px;
    max-width: 100%;
    justify-self: center;
    align-self: center;
}

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

.piece-rule
{
    width: 100%;
    height: 1px;
    margin: 0;

    background-color: var( --shade-light );
    border: 0;
}

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

/* 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 */
.piece-eyebrow
{
    display: grid;
    grid-template-columns: 32px auto;
    grid-gap: 12px;
    align-items: center;
    justify-self: start;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var( --accent-text );
}

.piece-eyebrow::before
{
    content: "";
    height: 2px;

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

.piece-centre .piece-eyebrow,
.piece-intro .piece-eyebrow,
.piece-eyebrow.piece-centre
{
    justify-self: center;
}

/* one or two words of the heading picked out - the client's own words */
.piece-accent
{
    color: var( --accent );
}

/* the second half of a two-part heading ( "Quality Work. Built to Last." ),
   always on a line of its own. Each skin styles it its own way - in the
   accent, in italic, lighter, highlighted - so here it only breaks */
.piece-second
{
    color: var( --accent-text );
}

.piece-second::before
{
    content: "\A";
    white-space: pre;
}

/* - - - imagery - - - */

/* A plain holder for a picture and, when there is one, its floating card.
   It used to set a block of the accent behind the picture's corner, with
   a drop shadow under it; both are gone. Photographs sit flat with
   rounded corners, which reads cleanly on every template. */
.piece-media
{
    position: relative;
    display: grid;
    width: 100%;
}

.piece-media > *
{
    position: relative;
    z-index: 1;
}

/* - a small card laid over a picture's corner - a figure, a short review
     or the years in business, taken from the copy - */

.piece-float
{
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;

    display: grid;
    grid-gap: 4px;
    max-width: 240px;
    padding: 18px 22px;
    box-sizing: border-box;

    background-color: var( --paper );
    border-radius: var( --piece-radius-card, 14px );
}

.piece-float b
{
    font-size: 30px;
    line-height: 1;
    color: var( --accent );
}

.piece-float p
{
    font-size: 14px;
    line-height: 1.4;
    color: var( --text );
}

.piece-media-left .piece-float
{
    right: 20px;
    left: auto;
}

/* - three or more pictures together: one large, the rest beside it - */

.piece-mosaic
{
    display: grid;
    grid-gap: 16px;
}

.piece-mosaic .piece-shot
{
    border-radius: var( --piece-radius-media, 14px );
}

/* - - - numbers and steps - - - */

/* figures the copy already states - years, jobs, rating */
.piece-stats
{
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    grid-gap: 32px 24px;
    padding: 32px 0;

    border-top: solid 1px var( --shade-light );
    border-bottom: solid 1px var( --shade-light );
}

.piece-stat
{
    display: grid;
    grid-gap: 6px;
    justify-items: center;
    text-align: center;
}

.piece-stat b
{
    font-size: clamp( 34px, 4vw, 48px );
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var( --accent );
}

.piece-stat p
{
    justify-self: center;

    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

/* - a process, numbered by the stylesheet so the copy is not touched -
     only for things that happen in order - */

.piece-steps
{
    display: grid;
    grid-gap: 24px;

    counter-reset: piece-step;
}

.piece-step
{
    display: grid;
    grid-gap: 10px;
    align-content: start;
    padding: 28px;
    box-sizing: border-box;

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

    counter-increment: piece-step;
}

.piece-step::before
{
    content: counter( piece-step, decimal-leading-zero );

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var( --accent-text );
}

.piece-step :is( h3, p, li )
{
    color: var( --text );
}

/* - - - cards - - - */

/* The refined card: a hairline border, an accent bar that grows on
   hover, and a lift. Reads well on white and on the tinted band. */
.piece-card
{
    position: relative;
    display: grid;
    grid-gap: 12px;
    align-content: start;
    padding: 32px 28px;
    box-sizing: border-box;
    overflow: hidden;

    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;
}

.piece-card::before
{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;

    background-color: var( --accent );

    transition: ease all .3s;
}

.piece-card:hover
{
    transform: translateY( -6px );
    box-shadow: 0 24px 48px -24px var( --shade );
}

.piece-card:hover::before
{
    width: 100%;
}

.piece-card :is( h3, h4 )
{
    color: var( --ink );
}

.piece-card :is( p, li )
{
    color: var( --text-soft );
}

/* - a card with its picture on top, edge to edge - */

.piece-card-image
{
    padding-top: 0;
}

.piece-card-image > .piece-shot
{
    margin: 0 -28px 8px;
    border-radius: 0;
}

/* - - - option cards - - - */

/* Choices the client offers side by side - memberships, packages, ways to
   start. One may be featured: the dark card, lifted. A short tag can sit
   on top of it. Not for steps - those are .piece-steps. */

.piece-options
{
    align-items: stretch;
}

.piece-option
{
    position: relative;
    display: grid;
    grid-gap: 14px;
    align-content: start;
    padding: 40px 32px 36px;
    box-sizing: border-box;

    background-color: var( --paper );
    border: solid 1px var( --shade-light );
    border-radius: var( --piece-radius-card, 20px );

    transition: ease all .3s;
}

.piece-option:hover
{
    transform: translateY( -4px );
    box-shadow: 0 24px 48px -28px var( --shade );
}

.piece-option :is( h3, h4 )
{
    color: var( --ink );
}

.piece-option :is( p, li )
{
    color: var( --text-soft );
}

/* - the price or the headline figure of an option - */

.piece-option-price
{
    font-size: 15px;
}

.piece-option-price b
{
    font-size: clamp( 30px, 3.4vw, 42px );
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var( --ink );
}

/* - the small pill on top - */

.piece-option-tag
{
    position: absolute;
    top: 0;
    left: 32px;
    transform: translateY( -50% );

    padding: 6px 14px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var( --on-accent );

    background-color: var( --accent );
    border-radius: var( --piece-radius-btn, 20px );
}

/* - the featured one: dark, lifted - */

section .piece-option.piece-option-featured
{
    background-color: var( --ink );
    border-color: var( --ink );
    box-shadow: 0 32px 64px -32px var( --shade-deep );
}

section .piece-option.piece-option-featured :is( h3, h4, b, .piece-option-price b )
{
    color: var( --on-ink );
}

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

section .piece-option.piece-option-featured .piece-option-tag
{
    color: var( --on-accent-dark );

    background-color: var( --accent-dark );
}

section .piece-option.piece-option-featured .piece-list li::before
{
    color: var( --accent-dark );
}

section .piece-option.piece-option-featured .piece-btn
{
    background-color: var( --accent-dark );
    border-color: var( --accent-dark );
}

section .piece-option.piece-option-featured .piece-btn :is( h4, p, span )
{
    color: var( --on-accent-dark );
}

/* - - - 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 - */

/* - the small link at the foot of a card: spaced capitals and an arrow - */

.piece-card-link
{
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 8px;
    align-items: center;
    justify-self: start;
    margin-top: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var( --accent-text );
}

.piece-card-link::after
{
    content: "\2192";

    transition: ease transform .3s;
}

.piece-card-link:hover::after
{
    transform: translateX( 4px );
}

/* - a price on a card - */

.piece-card-price
{
    margin-top: 4px;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var( --ink );
}

/* - - - 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 */

.piece-card-image > .piece-shot + :is( i, svg )
{
    position: relative;
    z-index: 1;
    margin-top: -42px;

    box-shadow: 0 6px 16px -8px var( --shade );
}

/* the dark card - one in a row, to pick out the lead service */
section .piece-card.piece-card-dark
{
    background-color: var( --ink );
    border-color: var( --ink );
}

section .piece-card.piece-card-dark :is( h3, h4, .piece-card-price )
{
    color: var( --on-ink );
}

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

section .piece-card.piece-card-dark .piece-card-link
{
    color: var( --accent-dark );
}

section .piece-card.piece-card-dark > :is( i, svg )
{
    color: var( --accent-dark );

    background-color: var( --glow-faint );
}

section .piece-card.piece-card-dark::before
{
    background-color: var( --accent-dark );
}

/* the tinted card - a softer way to pick one out: a wash a step deeper
   than the tint, so it still shows on the tinted band and on templates
   whose cards are already tinted */
section .piece-card.piece-card-tint
{
    background-color: color-mix( in srgb, var( --accent ) 13%, #fff );
    border-color: transparent;
}

/* - - - price cards: the price per period, ticks, an outline button - - - */

.piece-option-price span
{
    font-size: 15px;
    opacity: .75;
}

.piece-option .piece-checklist
{
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 10px;
    margin-top: 4px;
}

.piece-option .piece-checklist > :is( li, p )
{
    min-height: 20px;
    padding-left: 30px;

    font-size: 15px;
}

.piece-option .piece-checklist > :is( li, p )::before
{
    width: 20px;
    height: 20px;

    font-size: 11px;
}

.piece-option > .piece-btn
{
    justify-self: stretch;
    margin-top: 10px;
}

.piece-option:not( .piece-option-featured ) > .piece-btn
{
    background-color: transparent;
    border-color: var( --accent );
}

.piece-option:not( .piece-option-featured ) > .piece-btn :is( h4, p, span )
{
    color: var( --accent-text );
}

section .piece-option.piece-option-featured .piece-checklist > :is( li, p )::before
{
    color: var( --on-accent-dark );

    background-color: var( --accent-dark );
}

/* - - - info / stat cards - - - */

/* the stats strip as cards: an icon, the figure, what it counts and an
   optional short line - every word and figure from the copy */
.piece-stats.piece-stats-cards
{
    grid-gap: 24px;
    padding: 0;

    border: 0;
}

.piece-stats-cards > .piece-stat
{
    grid-gap: 8px;
    justify-items: start;
    padding: 28px 26px;

    text-align: left;
}

.piece-stats-cards > .piece-stat > :is( i, svg )
{
    margin-bottom: 6px;
}

.piece-stats-cards .piece-stat b
{
    color: var( --ink );
}

.piece-stats-cards .piece-stat p
{
    justify-self: start;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var( --ink );
    opacity: 1;
}

.piece-stats-cards .piece-stat p.piece-stat-note
{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var( --text-soft );
}

@media( min-width: 900px )
{
    .piece-stats.piece-stats-cards
    {
        grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
    }
}

/* - - - product cards - - - */

/* Things the client sells, each with its price: a photo ( with an
   optional tag - Bestseller, New - in the copy's words ), the name, one
   short line, the price and a small link. */

.piece-product > .piece-shot
{
    aspect-ratio: 5 / 4;
}

.piece-product-tag
{
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 5px 10px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var( --on-ink ) !important;

    background-color: var( --ink );
    border-radius: var( --piece-radius-btn, 20px );
}

.piece-product-body
{
    display: grid;
    grid-gap: 8px;
    align-content: start;
    padding: 20px 22px 24px;
}

.piece-product-body h3
{
    font-size: 18px;
}

.piece-product-body p
{
    font-size: 14.5px;
    line-height: 1.55;
}

/* - - - team cards - - - */

/* The people the copy introduces: a photo of each ( or none for any ),
   the name, the role, a short line and links to their profiles. */

.piece-member > .piece-shot
{
    aspect-ratio: 1 / 1;
}

.piece-member-body
{
    display: grid;
    grid-gap: 6px;
    align-content: start;
    padding: 20px 22px 24px;
}

.piece-member-body h3
{
    font-size: 19px;
}

.piece-member-body p.piece-member-role
{
    margin-bottom: 6px;

    font-size: 14px;
    font-weight: 600;
    color: var( --accent-text );
}

.piece-member-body p
{
    font-size: 14.5px;
    line-height: 1.55;
}

.piece-member-links
{
    display: grid;
    grid-auto-flow: column;
    grid-gap: 14px;
    justify-content: start;
    margin-top: 10px;
}

.piece-member-links a
{
    font-size: 17px;
    color: var( --text-muted );
    text-decoration: none;
}

.piece-member-links a:hover
{
    color: var( --accent-text );
}

/* - - - testimonial cards - - - */

/* Only when switched on ( and only the copy's own reviews, word for
   word ): a quote mark, the review, who said it, and stars when the copy
   gives a rating. Dark and tinted versions pick one out. */

.piece-testimonial
{
    grid-gap: 18px;
    padding: 64px 28px 28px;
}

.piece-testimonial::before
{
    content: "\201C";
    position: absolute;
    top: 14px;
    left: 24px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    color: var( --accent );
}

.piece-testimonial > p
{
    font-size: 16px;
    line-height: 1.65;
}

.piece-testimonial-who
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 2px 14px;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}

.piece-testimonial-who:has( > img )
{
    grid-template-columns: 48px minmax( 0, 1fr );
}

.piece-testimonial-who > img
{
    grid-row: span 3;
    width: 48px;
    height: 48px;

    object-fit: cover;
    border-radius: 50%;
}

.piece-testimonial-who b
{
    font-size: 15px;
    color: var( --ink );
}

.piece-testimonial-who span
{
    font-size: 13px;
    color: var( --text-muted );
}

.piece-stars
{
    font-size: 15px;
    letter-spacing: .12em;
    color: var( --accent );
}

section .piece-testimonial.piece-testimonial-dark
{
    background-color: var( --ink );
    border-color: var( --ink );
}

section .piece-testimonial.piece-testimonial-dark :is( p, b )
{
    color: var( --on-ink );
}

section .piece-testimonial.piece-testimonial-dark span
{
    color: var( --on-ink-muted );
}

section .piece-testimonial.piece-testimonial-dark::before
{
    color: var( --accent-dark );
}

section .piece-testimonial.piece-testimonial-tint
{
    background-color: color-mix( in srgb, var( --accent ) 13%, #fff );
    border-color: transparent;
}

/* - - - 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. */

.piece-category > .piece-shot
{
    aspect-ratio: 16 / 11;
}

.piece-category-body
{
    display: grid;
    grid-gap: 6px;
    align-content: start;
    padding: 16px 20px 44px;
}

.piece-category-body > :is( i, svg )
{
    width: 22px;
    height: 22px;
    margin-bottom: 4px;

    font-size: 22px;
    color: var( --accent );
}

.piece-category-body h3
{
    font-size: 17px;
}

.piece-category-body p
{
    font-size: 13.5px;
    color: var( --text-muted );
}

/* - - - article cards - - - */

/* Posts, news or case studies the copy lists: a photo, a small label,
   the title, and who and how long. */

.piece-article > .piece-shot
{
    aspect-ratio: 16 / 9;
}

.piece-article-body
{
    display: grid;
    grid-gap: 8px;
    align-content: start;
    padding: 18px 22px 48px;
}

.piece-article-body p.piece-article-label
{
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var( --accent-text );
}

.piece-article-body h3
{
    font-size: 18px;
    line-height: 1.3;
}

.piece-article-body p
{
    font-size: 13px;
    color: var( --text-muted );
}

/* - - - 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. */

/* the dark bands get a touch more air in the designed layer */
.piece-band.piece-roomy,
.piece-band-image.piece-roomy
{
    padding: 96px 0;
}

/* - - - lists - - - */

/* a two-column checklist for a run of short benefits */
.piece-checklist
{
    display: grid;
    grid-gap: 14px 32px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.piece-checklist > :is( li, p )
{
    position: relative;
    display: block;
    min-height: 28px;
    padding-left: 40px;
}

/* centred text centres the checklist as a block - its items stay
   left-aligned, so the ticks line up down each column */
.piece-centre .piece-checklist
{
    justify-self: center;
    justify-content: center;
}

.piece-centre .piece-checklist > :is( li, p )
{
    justify-self: start;

    text-align: left;
}

/* in the padding, not a grid column - see .piece-list li::before */
.piece-checklist > :is( li, p )::before
{
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var( --on-accent );

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

/* - - - opening hours - - - */

/* Days and times the copy lists, one row each - never invented, never
   reworded. */

.piece-hours
{
    display: grid;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.piece-hours > div
{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 16px;
    justify-content: space-between;
    padding: 14px 0;

    border-bottom: solid 1px var( --shade-light );
}

.piece-hours dt
{
    font-weight: 600;
    color: var( --ink );
}

.piece-hours dd
{
    margin: 0;

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

.piece-centre .piece-hours,
.piece-intro + .piece-hours
{
    justify-self: center;
}

/* - - - a price list - - - */

/* Treatments or services with their prices, grouped under headings - a
   salon's menu, a groomer's list, a trade's set prices. No boxes: the
   structure is alignment, hairlines and type size. Each group is a
   picture beside its list ( or the list alone ):

     <div class="element piece-prices">
         <div class="element piece-price-group">
             <div class="piece-shot"> <img …> </div>
             <div class="element piece-price-list">
                 <div class="element piece-price-head">
                     <h3>Facials</h3>
                     <p class="piece-price-tag">Refresh · Glow</p>
                 </div>
                 <div class="element piece-price-item">
                     <div class="element piece-price-what">
                         <p class="piece-price-name">Signature Facial</p>
                         <p>A personalised facial…</p>
                     </div>
                     <p class="piece-price-time">60 mins</p>
                     <p class="piece-price-cost">£45</p>
                 </div>
             </div>
         </div>
     </div>

   The tag line and the time are optional - leave either out and the row
   closes up. */

.piece-prices
{
    display: grid;
    grid-gap: 56px;
    width: 100%;
}

.piece-price-group
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
}

/* the picture: a short strip over its list on a phone, a column beside
   it from tablet up, as tall as the list it belongs to */
.piece-price-group > .piece-shot
{
    aspect-ratio: 16 / 7;
    width: 100%;
}

@media( min-width: 900px )
{
    .piece-price-group
    {
        grid-template-columns: minmax( 0, 1fr ) minmax( 0, 3fr );
        grid-gap: 48px;
        align-items: stretch;
    }

    .piece-price-group > .piece-shot
    {
        aspect-ratio: auto;
        height: 100%;
        min-height: 260px;
        max-height: 560px;
    }
}

/* a group with no picture fills the content width like the rest of the
   page. With no pictures at all, the groups sit two to a row from 900px,
   read left to right, each row lined up across the page */
.piece-price-group:not( :has( > .piece-shot ) )
{
    grid-template-columns: minmax( 0, 1fr );
    width: 100%;
}

@media( min-width: 900px )
{
    .piece-prices:not( :has( .piece-shot ) ):has( > .piece-price-group:nth-child( 2 ) )
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        grid-gap: 56px 72px;
        align-items: start;
    }
}

.piece-price-list
{
    display: grid;
    grid-gap: 0;
    align-content: start;
}

/* - the heading: the name on the left, a hairline running on from it,
     the tag line sitting on the rule at the right - */

.piece-price-head
{
    display: grid;
    grid-template-columns: auto minmax( 0, 1fr );
    grid-gap: 0 24px;
    align-items: end;
    padding-bottom: 8px;
}

.piece-price-head::after
{
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    height: 1px;
    margin-bottom: .55em;

    background-color: var( --accent );
    opacity: .45;
}

.piece-price-head h3
{
    grid-column: 1;
    grid-row: 1;

    font-size: clamp( 28px, 3vw, 40px );
    line-height: 1.1;
    color: var( --ink );
}

.piece-price-tag
{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: calc( .55em + 10px );

    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: right;
    color: var( --accent-text );
}

/* - one row: what it is, how long, how much - */

.piece-price-item
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto minmax( 64px, auto );
    grid-gap: 0 28px;
    align-items: center;
    padding: 18px 0;

    border-bottom: solid 1px var( --tint-line );
}

.piece-price-item:last-child
{
    border-bottom: none;
}

.piece-price-what
{
    display: grid;
    grid-gap: 4px;
}

.piece-price-what p
{
    font-size: 14px;
    line-height: 1.5;
    color: var( --text-muted );
}

.piece-price-what .piece-price-name
{
    font-size: 17px;
    line-height: 1.35;
    color: var( --ink );
}

.piece-price-time
{
    font-size: 13px;
    color: var( --text-muted );
    white-space: nowrap;
}

.piece-price-cost
{
    grid-column: 3;
    justify-self: end;

    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var( --ink );
}

@media( max-width: 599px )
{
    .piece-price-head
    {
        grid-template-columns: minmax( 0, 1fr );
    }

    /* on a phone the rule runs under the heading, and the tag line goes */
    .piece-price-head::after
    {
        grid-column: 1;
        grid-row: 2;
        margin: 10px 0 0;
    }

    .piece-price-tag
    {
        display: none;
    }

    /* the time tucks under the price, so the words get the width */
    .piece-price-item
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
        grid-gap: 2px 16px;
        align-items: start;
        padding: 14px 0;
    }

    .piece-price-what
    {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .piece-price-cost
    {
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
    }

    .piece-price-time
    {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 12px;
    }
}

/* - - - a price menu - - - */

/* The simple one: the lists a client sends with a price on each line -
   a barber's cuts, a beautician's waxing. Group headings in spaced
   capitals with a hairline running on, then name ..... price rows with a
   dotted leader between. On a wide screen one group fills the width,
   two sit side by side, three or more flow into two balanced columns.

     <div class="element piece-menu">
         <div class="element piece-menu-group">
             <div class="element piece-menu-head">
                 <i class="fa-light fa-scissors"></i>        ( optional )
                 <h3>Haircuts &amp; styling</h3>
             </div>
             <div class="element piece-menu-item">
                 <p class="piece-menu-name">Classic haircut</p>
                 <p class="piece-menu-cost">£25</p>
             </div>
         </div>
     </div>                                                                */

.piece-menu
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 48px;
    width: 100%;
}

/* on a wide screen: one group fills the width like the rest of the
   content, two sit side by side, and three or more flow into two
   balanced columns, newspaper style, so an odd one out leaves no hole */
@media( min-width: 900px )
{
    .piece-menu:has( > .piece-menu-group:nth-child( 2 ) ):not( :has( > .piece-menu-group:nth-child( 3 ) ) )
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        grid-gap: 56px 72px;
    }

    .piece-menu:has( > .piece-menu-group:nth-child( 3 ) )
    {
        display: block;
        max-width: none;
        column-count: 2;
        column-gap: 72px;
    }

    .piece-menu:has( > .piece-menu-group:nth-child( 3 ) ) > .piece-menu-group
    {
        margin-bottom: 52px;
        break-inside: avoid;
    }
}

.piece-menu-group
{
    display: grid;
    grid-gap: 4px;
    align-content: start;
}

/* - the heading: an optional icon in a ring, the name in spaced capitals,
     a hairline running on to the edge - */

.piece-menu-head
{
    display: grid;
    grid-template-columns: auto minmax( 24px, 1fr );
    grid-gap: 16px;
    align-items: center;
    margin-bottom: 10px;
}

.piece-menu-head:has( > :is( i, svg ) )
{
    grid-template-columns: auto auto minmax( 24px, 1fr );
}

.piece-menu-head::after
{
    content: "";
    height: 1px;

    background-color: var( --accent );
    opacity: .45;
}

.piece-menu-head :is( i, svg )
{
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 12px;

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

    border: solid 1.5px var( --accent );
    border-radius: var( --piece-radius-icon, 50% );
}

.piece-menu-head h3
{
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var( --accent-text );
}

/* the heading font is for display headings - not these small capitals */
html body .piece-menu-head h3
{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

/* - a row: name, a dotted leader, the price - */

.piece-menu-item
{
    display: grid;
    grid-template-columns: auto minmax( 20px, 1fr ) auto;
    grid-gap: 0 10px;
    align-items: baseline;
    padding: 7px 0;
}

.piece-menu-item::after
{
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: .4em;

    border-bottom: dotted 1.5px var( --shade );
}

.piece-menu-name
{
    grid-column: 1;
    grid-row: 1;

    font-size: 16px;
    line-height: 1.45;
    color: var( --ink );
}

.piece-menu-cost
{
    grid-column: 3;
    grid-row: 1;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var( --ink );
}

@media( max-width: 599px )
{
    .piece-menu-head h3
    {
        font-size: 14px;
        letter-spacing: .14em;
    }
}

/* with an icon, the rows line up under the heading's words */
@media( min-width: 600px )
{
    .piece-menu-group:has( > .piece-menu-head > :is( i, svg ) ) > .piece-menu-item
    {
        margin-left: 62px;
    }
}

/* - - - featured services - - - */

/* Two to four services picked out with a photo, a short description and
   a price each - "our most popular", a home page teaser, packages. The
   one card style on the page when it is used: photo, an optional icon in
   a ring riding the photo's edge, the name, an optional small-capitals
   kind, the description, a hairline, the price, an optional button.
   Prices and buttons line up across the row however long the words.

     <div class="element piece-features">
         <div class="element piece-feature">
             <div class="piece-shot"> <img …> </div>
             <i class="fa-light fa-scissors"></i>                ( optional )
             <div class="element piece-feature-body">
                 <h3>Men's Haircut</h3>
                 <p class="piece-feature-kind">Barber services</p>   ( optional )
                 <p>Precision cut, tailored to your style.</p>
                 <p class="piece-feature-cost">£25</p>
                 <a class="piece-btn" href="…"><span>Book now</span></a>  ( optional )
             </div>
         </div>
     </div>                                                                */

.piece-features
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
    width: 100%;
}

@media( min-width: 600px )
{
    .piece-features
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }
}

@media( min-width: 1100px )
{
    .piece-features:has( > .piece-feature:nth-child( 3 ) )
    {
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    }

    .piece-features:has( > .piece-feature:nth-child( 4 ) )
    {
        grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    }

    /* two side by side would be too wide - keep them to a pair */
    .piece-features:not( :has( > .piece-feature:nth-child( 3 ) ) )
    {
        max-width: 820px;
        justify-self: center;
    }
}

.piece-feature
{
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-gap: 0;
    overflow: hidden;

    text-align: center;

    background-color: var( --paper );
    border: solid 1px var( --tint-line );
    border-radius: var( --piece-radius-card, 10px );
}

.piece-feature > .piece-shot,
.piece-feature > .piece-shot img
{
    border-radius: 0;
}

.piece-feature > .piece-shot
{
    aspect-ratio: 4 / 3;
}

/* the icon sits on the photo's lower edge, half over it */
.piece-feature > :is( i, svg )
{
    position: relative;
    z-index: 1;
    justify-self: center;
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    margin-top: -32px;
    padding: 18px;

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

    background-color: var( --paper );
    border: solid 1.5px var( --accent );
    border-radius: var( --piece-radius-icon, 50% );
}

.piece-feature-body
{
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-gap: 10px;
    justify-items: center;
    padding: 24px 28px 28px;
}

.piece-feature > :is( i, svg ) + .piece-feature-body
{
    padding-top: 14px;
}

/* centred whatever the template does with headings and paragraphs */
.piece-feature .piece-feature-body > :is( h3, p )
{
    justify-self: center;
    text-align: center;
}

.piece-feature-body h3
{
    font-size: clamp( 22px, 2vw, 28px );
    line-height: 1.15;
    text-align: center;
    color: var( --ink );
}

.piece-feature-body p
{
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    color: var( --text-muted );
}

.piece-feature-body .piece-feature-kind
{
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var( --text-muted );
}

/* no kind line: the description takes the row that would grow */
.piece-feature-body:not( :has( > .piece-feature-kind ) )
{
    grid-template-rows: auto 1fr auto auto;
}

.piece-feature-body .piece-feature-cost
{
    align-self: end;
    width: 100%;
    margin-top: 8px;
    padding-top: 18px;

    font-size: 30px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var( --accent-text );

    border-top: solid 1px var( --tint-line );
}

.piece-feature-body .piece-btn
{
    justify-self: stretch;
    justify-content: center;
    margin-top: 6px;
}

/* - - - reviews - - - */

/* a review on a card, with a large quote mark */
.piece-review
{
    position: relative;
    display: grid;
    grid-gap: 16px;
    align-content: start;
    margin: 0;
    padding: 56px 32px 32px;
    box-sizing: border-box;

    background-color: var( --paper );
    border-radius: var( --piece-radius-card, 18px );
    box-shadow: 0 24px 48px -28px var( --shade );
}

.piece-review::before
{
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 26px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 84px;
    line-height: 1;
    color: var( --accent );
}

.piece-review :is( p, h3 )
{
    color: var( --text );
}

.piece-review p
{
    font-size: 16px;
    line-height: 1.65;
}

.piece-review-who
{
    display: grid;
    grid-gap: 2px;
    padding-top: 16px;

    border-top: solid 1px var( --shade-light );
}

.piece-review-who b
{
    color: var( --ink );
}

/* - - - 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-left::before
{
    background-image: linear-gradient( 90deg, var( --ink )f2 0%, var( --ink )d9 45%, var( --ink )59 100% );
}

.piece-cover .piece-eyebrow::before
{
    background-color: var( --accent-dark );
}

/* a taller one, for an opening */
.piece-cover-tall
{
    display: grid;
    align-items: center;
    min-height: 560px;
}

/* - - - 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 */
.piece-divide .workspace
{
    margin-top: -16px;
    margin-bottom: -16px;
}

.piece-divider
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
    grid-gap: 24px;
    align-items: center;
    width: 100%;
    max-width: 760px;
    justify-self: center;

    color: var( --accent );
}

.piece-divider::before,
.piece-divider::after
{
    content: "";
    height: 2px;

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

.piece-divider :is( i, svg )
{
    font-size: var( --piece-mark, 34px );
    width: var( --piece-mark, 34px );
    height: var( --piece-mark, 34px );

    color: var( --accent );
}

/* the dot - the default ( Finishing touches step ): Font Awesome's solid
   circle, a third the size an icon would be */
.piece-divider .piece-divider-dot
{
    font-size: calc( var( --piece-mark, 34px ) * .32 );
    width: calc( var( --piece-mark, 34px ) * .32 );
    height: calc( var( --piece-mark, 34px ) * .32 );
}

/* a small version of the logo in the middle instead ( Finishing touches
   step ) - as it is, or masked so it takes the accent colour */
.piece-divider-mark
{
    display: block;
    height: var( --piece-mark, 34px );
    width: auto;
    max-width: 240px;
}

.piece-divider-mark.is-tinted
{
    background-color: var( --accent );

    /* the picture itself comes inline ( mask-image ), so its path is
       read from the page, not from this stylesheet */
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.piece-dark .piece-divider-mark.is-tinted
{
    background-color: var( --accent-dark );
}

.piece-dark .piece-divider,
.piece-dark .piece-divider :is( i, svg )
{
    color: var( --accent-dark );
}

.piece-dark .piece-divider::before,
.piece-dark .piece-divider::after
{
    background-color: var( --accent-dark );
}

/* - - - the close - - - */

/* The page's last words, centred on the page's own background: a display
   heading, a short capitals line, one button. No box, no band - the
   space around it does the work. */
.piece-close .piece-narrow
{
    display: grid;
    grid-gap: 16px;
    justify-items: center;
}

/* 64px under the heading in all - the grid's 16px plus this */
.piece-close .piece-btn-row
{
    margin-top: 48px;
}

.piece-close h3
{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A rounded panel in the dark with a soft glow of the accent across it -
   sits inside a plain section, so the page ends on a strong note without
   another full-width band. */
.piece-cta-panel
{
    position: relative;
    display: grid;
    grid-gap: 20px;
    justify-items: center;
    padding: 64px 32px;
    box-sizing: border-box;
    overflow: hidden;

    text-align: center;

    background-color: var( --ink );
    background-image: radial-gradient( circle at 85% 15%, var( --accent-dark )66, transparent 55% ),
                      radial-gradient( circle at 10% 100%, var( --accent-dark )33, transparent 45% );
    border-radius: 24px;
}

.piece-cta-panel :is( h1, h2, h3, p )
{
    justify-self: center;
    max-width: 680px;

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

.piece-cta-panel .piece-eyebrow
{
    color: var( --on-ink );
}

.piece-cta-panel .piece-eyebrow::before
{
    background-color: var( --paper );
}

.piece-cta-panel .piece-btn
{
    justify-self: center;

    background-color: var( --paper );
    border-color: var( --paper );
}

.piece-cta-panel .piece-btn :is( h4, p, span )
{
    color: var( --ink );
}

.piece-cta-panel .piece-btn-alt
{
    background-color: transparent;
    border-color: var( --on-ink-muted );
}

.piece-cta-panel .piece-btn-alt :is( h4, p, span )
{
    color: var( --on-ink );
}

.piece-cta-panel .piece-btn-row
{
    justify-content: center;
    justify-self: center;
}

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

/* 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. */

section.piece-dark
{
    padding: 88px 0;

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

section.piece-dark-alt
{
    background-color: var( --ink-soft );
}

/* the divider's own section takes none of that - the sections either
   side bring their padding, and it sits halfway between them */
section.piece-divide.piece-dark
{
    padding: 0;
}

/* type */

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

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

.piece-dark a:not( .piece-btn )
{
    color: var( --on-ink );
}

.piece-dark :is( .piece-eyebrow, .piece-accent, .piece-second, .piece-heading h3 ),
.piece-dark .piece-step::before
{
    color: var( --accent-dark );
}

.piece-dark .piece-eyebrow::before,
.piece-dark .piece-card::before
{
    background-color: var( --accent-dark );
}

.piece-dark .piece-heading
{
    border-bottom-color: var( --glow-line );
}

.piece-dark .piece-list li::before,
.piece-dark .piece-review::before,
.piece-dark .piece-stat b
{
    color: var( --accent-dark );
}

.piece-dark .piece-checklist > :is( li, p )::before
{
    color: var( --on-accent-dark );

    background-color: var( --accent-dark );
}

.piece-dark :is( .piece-stats, .piece-hours > div )
{
    border-color: var( --glow-line );
}

.piece-dark .piece-hours dt
{
    color: var( --on-ink );
}

.piece-dark :is( .piece-price-head h3, .piece-price-name, .piece-price-cost )
{
    color: var( --on-ink );
}

.piece-dark :is( .piece-price-what p:not( .piece-price-name ), .piece-price-time )
{
    color: var( --on-ink-muted );
}

.piece-dark .piece-price-tag
{
    color: var( --accent-dark );
}

.piece-dark .piece-price-head::after
{
    background-color: var( --accent-dark );
}

.piece-dark .piece-price-item
{
    border-color: var( --glow-line );
}

.piece-dark :is( .piece-menu-name, .piece-menu-cost )
{
    color: var( --on-ink );
}

.piece-dark .piece-menu-head h3,
.piece-dark .piece-menu-head :is( i, svg )
{
    color: var( --accent-dark );
}

.piece-dark .piece-menu-head :is( i, svg )
{
    border-color: var( --accent-dark );
}

.piece-dark .piece-menu-head::after
{
    background-color: var( --accent-dark );
}

.piece-dark .piece-menu-item::after
{
    border-color: var( --glow );
}

.piece-dark .piece-feature
{
    background-color: var( --glow-faint );
    border-color: var( --glow-line );
}

.piece-dark .piece-feature > :is( i, svg )
{
    color: var( --accent-dark );

    background-color: var( --ink );
    border-color: var( --accent-dark );
}

.piece-dark .piece-feature-body h3
{
    color: var( --on-ink );
}

.piece-dark .piece-feature-body :is( p, .piece-feature-kind )
{
    color: var( --on-ink-muted );
}

.piece-dark .piece-feature-body .piece-feature-cost
{
    color: var( --accent-dark );
    border-color: var( --glow-line );
}

/* faint panels instead of white cards */

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat )
{
    background-color: var( --glow-faint );
    border: solid 1px var( --glow-line );
    box-shadow: none;
}

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat ) :is( h3, h4, b )
{
    color: var( --on-ink );
}

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat ) :is( p, li )
{
    color: var( --on-ink-soft );
}

.piece-dark .piece-review-who
{
    border-top-color: var( --glow-line );
}

.piece-dark .piece-quote
{
    background-color: var( --glow-faint );
    border-left-color: var( --accent-dark );
}

/* the featured option and the floating card stay white, so they lift */

section.piece-dark .piece-option.piece-option-featured
{
    background-color: var( --paper );
    border-color: var( --paper );
}

section.piece-dark .piece-option.piece-option-featured :is( h3, h4, b, .piece-option-price b )
{
    color: var( --ink );
}

section.piece-dark .piece-option.piece-option-featured :is( p, li )
{
    color: var( --text-soft );
}

section.piece-dark .piece-option.piece-option-featured .piece-option-tag
{
    color: var( --on-accent );

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

section.piece-dark .piece-option.piece-option-featured .piece-btn
{
    background-color: var( --ink );
    border-color: var( --ink );
}

section.piece-dark .piece-option.piece-option-featured .piece-btn :is( h4, p, span )
{
    color: var( --on-ink );
}

.piece-dark .piece-float b
{
    color: var( --ink );
}

.piece-dark .piece-float p
{
    color: var( --text );
}

/* buttons */

.piece-dark .piece-btn
{
    background-color: var( --accent-dark );
    border-color: var( --accent-dark );
}

.piece-dark .piece-btn :is( h4, p, span )
{
    color: var( --on-accent-dark );
}

.piece-dark .piece-btn-alt
{
    background-color: transparent;
    border-color: var( --glow-edge );
}

.piece-dark .piece-btn-alt :is( h4, p, span )
{
    color: var( --on-ink );
}

/* the panel and the tint band, set a shade apart from the dark around them */

.piece-dark .piece-cta-panel
{
    background-color: var( --ink-soft );
    border: solid 1px var( --glow-line );
}

.piece-dark-alt .piece-cta-panel
{
    background-color: var( --ink );
}

.piece-dark .piece-cta-panel .piece-btn
{
    background-color: var( --paper );
    border-color: var( --paper );
}

.piece-dark .piece-cta-panel .piece-btn :is( h4, p, span )
{
    color: var( --ink );
}

.piece-dark .piece-cta-panel .piece-btn-alt
{
    background-color: transparent;
    border-color: var( --glow-edge );
}

.piece-dark .piece-cta-panel .piece-btn-alt :is( h4, p, span )
{
    color: var( --on-ink );
}

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

/* The call-to-action banner */

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

/* A full-width band that breaks up a long run of sections that look the
   same: a short line from the copy and a button or two, kept to the
   site's content width, and - when one was set up on the Assigning
   images step - a letterbox picture filling the right half of the band
   out to the edge of the screen.

     <section class="piece-cta-band">
         <div class="workspace">
             <div class="element piece-cta-band-text">
                 <h2>Need a plumber today?</h2>
                 <p>Same-day call-outs across Whitby.</p>     ( optional )
             </div>

             <div class="element piece-btn-row">
                 <a class="piece-btn" href="contact.php"><span>Get a quote</span></a>
                 <a class="piece-btn piece-btn-alt" href="tel:…"><span>Call …</span></a>
             </div>
         </div>
     </section>

   Claude writes it without a picture. The build ( and the preview ) adds
   the picture when there is one - assets/img/cta-band.jpg - through
   styleCtaPhoto() in site-style.php: the section gains
   .piece-cta-band-photo, and its workspace a .piece-cta-band-media
   holding the <img>. With no picture the band stands on its own.

   Here it is a dark band: words on the left, buttons on the right from
   900px, stacked on a phone. With a picture the words and buttons take
   the left half of the content width and the picture the right half of
   the band, fading in from the band's colour; on a phone it is a strip
   across the top, edge to edge. Each skin gives it the template's own
   colour, edges and shape of picture. */

.piece-cta-band
{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 56px 0;

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

.piece-cta-band > .workspace
{
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
    align-items: center;
    justify-items: start;

    text-align: left;
}

/* the words and buttons sit over the picture's faded edge */
.piece-cta-band > .workspace > .element:not( .piece-cta-band-media )
{
    position: relative;
    z-index: 1;
}

.piece-cta-band-text
{
    display: grid;
    grid-gap: 10px;
    max-width: 640px;
}

.piece-cta-band :is( h2, h3, p )
{
    margin: 0;

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

.piece-cta-band h2
{
    font-size: clamp( 26px, 2.6vw, 36px );
    line-height: 1.15;
}

.piece-cta-band p
{
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;

    opacity: .92;
}

/* the second half of a two-part heading: the band's own text colour, a
   step softer. Skins that colour it keep it at 7:1 or better against
   their band - the accent darkened toward the ink on a pale band,
   lightened toward white on a dark one */
.piece-cta-band .piece-second
{
    color: inherit;

    opacity: .85;
}

/* - buttons: white on the dark, the second an outline, the first with an
     arrow - */

.piece-cta-band .piece-btn-row
{
    justify-content: start;
    margin-top: 0;
}

.piece-cta-band .piece-btn
{
    justify-self: start;

    background-color: var( --paper );
    border-color: var( --paper );
}

.piece-cta-band .piece-btn :is( h4, p, span )
{
    color: var( --ink );
    opacity: 1;
}

.piece-cta-band .piece-btn :is( h4, span )::after
{
    content: "\2192";
    margin-left: 10px;
}

.piece-cta-band .piece-btn-alt
{
    background-color: transparent;
    border-color: var( --on-ink-muted );
}

.piece-cta-band .piece-btn-alt :is( h4, p, span )
{
    color: var( --on-ink );
}

.piece-cta-band .piece-btn-alt :is( h4, span )::after
{
    content: none;
}

/* - the picture: a strip across the top on a phone, edge to edge,
     fading into the band below it - */

.piece-cta-band-media
{
    grid-column: 1 / -1;
    justify-self: stretch;
    margin: -56px calc( 50% - 50vw ) 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;

    -webkit-mask-image: linear-gradient( to bottom, #000 55%, transparent );
    mask-image: linear-gradient( to bottom, #000 55%, transparent );
}

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

@media( min-width: 900px )
{
    .piece-cta-band
    {
        padding: 64px 0;
    }

    .piece-cta-band > .workspace
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
        grid-gap: 48px;
    }

    .piece-cta-band .piece-btn-row
    {
        justify-self: end;
    }

    /* with a picture: words and buttons down the left half of the
       content, the picture the right half of the band */
    .piece-cta-band-photo
    {
        padding: 80px 0;
    }

    .piece-cta-band-photo > .workspace
    {
        grid-template-columns: minmax( 0, calc( 50% - 48px ) );
        grid-gap: 28px;
        align-content: center;
        min-height: 200px;
    }

    .piece-cta-band-photo .piece-btn-row
    {
        justify-self: start;
    }

    /* measured from the band - the workspace is not positioned - and
       left: auto, as the templates' anim.css pins every .element to
       left: 0 for its slide-in */
    .piece-cta-band-media
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 50%;
        margin: 0;
        aspect-ratio: auto;

        -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 38% );
        mask-image: linear-gradient( to right, transparent 0%, #000 38% );
    }
}

/* - on a dark page the dark band would vanish - it steps up a shade - */

.piece-cta-band.piece-dark
{
    background-color: var( --ink-soft );
}

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

/* Wider and narrower screens */

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

@media( min-width: 768px )
{
    .piece-stats
    {
        grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
    }

    .piece-checklist
    {
        grid-template-columns: repeat( 2, 1fr );
    }

    .piece-centre .piece-checklist
    {
        grid-template-columns: repeat( 2, max-content );
    }

    .piece-mosaic
    {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .piece-mosaic > :first-child
    {
        grid-row: 1 / span 2;
    }

    .piece-mosaic > :first-child .piece-shot
    {
        height: 100%;
        aspect-ratio: auto;
    }

    .piece-cta-panel
    {
        padding: 80px 64px;
    }
}

@media( min-width: 992px )
{
    .piece-steps
    {
        grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
    }

    .piece-option-featured
    {
        transform: scale( 1.04 );
    }

    .piece-option-featured:hover
    {
        transform: scale( 1.04 ) translateY( -4px );
    }
}
@media( max-width: 767px )
{
    .piece-float,
    .piece-media-left .piece-float
    {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        margin: -32px 16px 0;
    }

    section.piece-dark
    {
        padding: 64px 0;
    }

    .piece-options
    {
        grid-gap: 40px;
    }
}

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

/* 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. */

.piece-card::before
{
    display: none;
}

/* - - - 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. */

/* the second of a pair - an outline in the dark of the scheme */
.piece-btn-alt
{
    --btn-bg: transparent;
    --btn-line: var( --ink );
    --btn-text: var( --ink );
    --btn-fill: var( --ink );
    --btn-on: var( --on-ink );
}

:is( .piece-dark, .piece-band, .piece-band-image, .piece-cover, .piece-cta-panel, .piece-cta-band, .hero-content ) .piece-btn-alt
{
    --btn-bg: transparent;
    --btn-line: var( --glow-edge );
    --btn-text: var( --on-ink );
    --btn-fill: var( --paper );
    --btn-on: var( --ink );
}

/* the featured price card is dark on a light page, white on a dark one */
.piece-option-featured .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-on: var( --ink );
    --btn-arrow: var( --accent-dark );
    --btn-arrow-on: var( --on-ink );
}

.piece-dark .piece-option-featured .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-on: var( --on-ink );
    --btn-arrow: var( --accent );
    --btn-arrow-on: var( --ink );
}

/* - the second of a pair: the outline pill, no circle - */

:is( #page-content, .hero-content ) .piece-btn-alt
{
    grid-template-columns: auto;

    padding: 12px 28px;
}

:is( #page-content, .hero-content ) .piece-btn-alt :is( h4, p, span )
{
    grid-column: 1;
}

:is( #page-content, .hero-content ) .piece-btn-alt::before,
:is( #page-content, .hero-content ) .piece-btn-alt::after
{
    display: none;
}

:is( #page-content, .hero-content ) .piece-btn-alt:focus-visible
{
    outline-color: var( --btn-line );
}

/* - tracked capitals, no rule - */

.piece-eyebrow
{
    grid-template-columns: auto;
    letter-spacing: .28em;
}

.piece-eyebrow::before
{
    display: none;
}

/* - - - 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 .piece-second
{
    color: inherit;
    font-weight: var( --heading-light );

    opacity: .6;
}

/* - the heading pair: Pigeon's signature heading, from the example sites -
     the big capitals heading, then the strapline under it in bold accent
     capitals, close in and with no rule. Claude pairs most section
     headings on this template ( heading_pairs: on ). */

.piece-heading
{
    grid-gap: 10px;
    padding-bottom: 0;

    border-bottom: none;
}

.piece-heading h3
{
    margin: 0;

    font-size: clamp( 16px, 1.5vw, 20px );
    font-weight: var( --heading-strong );
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var( --accent-text );
}

/* on the dark, a photo or a band: the accent as it reads there */
:is( .piece-dark, .piece-band, .piece-band-image, .piece-cover ) .piece-heading h3
{
    color: var( --accent-dark );
}

/* - - - cards: editorial ( provisional ) - - - */

/* Square dark tags and widely tracked links. */

.piece-product-tag
{
    border-radius: 0;
}

.piece-card-link
{
    letter-spacing: .24em;
}

/* - - - the call-to-action banner: the cover line ( provisional ) - - - */

/* The dark, everything centred, the heading in big spaced capitals and
   outline pills. A picture fills the whole band under a heavy wash of the
   dark. Revisit with the rest of the skin. */

.piece-cta-band
{
    padding: 88px 0;
}

.piece-cta-band > .workspace
{
    grid-template-columns: minmax( 0, 1fr );
    justify-items: center;

    text-align: center;
}

.piece-cta-band .piece-btn-row,
.piece-cta-band-photo .piece-btn-row
{
    justify-self: center;
}

@media( min-width: 900px )
{
    .piece-cta-band,
    .piece-cta-band-photo
    {
        padding: 96px 0;
    }

    .piece-cta-band > .workspace,
    .piece-cta-band-photo > .workspace
    {
        grid-template-columns: minmax( 0, 1fr );
    }
}

.piece-cta-band h2
{
    font-size: clamp( 30px, 3.6vw, 48px );
    font-weight: var( --heading-strong );
    line-height: 1.05;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.piece-cta-band h2 .piece-second
{
    color: color-mix( in srgb, var( --accent-dark ) 62%, #fff );

    opacity: 1;
}

.piece-cta-band-media,
.piece-cta-band-photo .piece-cta-band-media
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: auto;
    margin: 0;
    aspect-ratio: auto;

    -webkit-mask-image: none;
    mask-image: none;
}

.piece-cta-band-media::after
{
    content: "";
    position: absolute;
    inset: 0;

    background-color: color-mix( in srgb, var( --ink ) 82%, transparent );
}

/* - - - sections: the template's flavour ( provisional - to fine-tune ) - - - */

/* The dark band carries Pigeon's own pattern - the shadowed blocks the
   footer sits on - so the two read as one family down the page. */

.piece-band,
.piece-dark.piece-dark-alt
{
    background-image: url( '../img/pattern-1-m.png' );
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
}

@media( min-width: 992px )
{
    .piece-band,
    .piece-dark.piece-dark-alt
    {
        background-image: url( '../img/pattern-1.png' );
    }
}

/* - - - the divider: the example sites' ornament - - - */

/* The builder's divider - a line, the trade icon ( or the logo, or a dot,
   from Finishing touches ), a line - drawn the way the example sites drew
   their <hr>: shorter lines, pulled in from the edges and tight to the
   mark, so it reads as an ornament rather than a rule. */

.piece-divider
{
    grid-gap: 14px;
    max-width: 600px;

    --piece-mark: 40px;
}

/* - - - 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. */

.piece-checklist > :is( li, p )::before
{
    content: "";
    width: 22px;
    height: 22px;
    top: .2em;

    background-color: var( --accent );
    border-radius: 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;
}

.piece-option .piece-checklist > :is( li, p )::before
{
    width: 18px;
    height: 18px;
}

/* on the dark, a band, a photo or the featured price card */
:is( .piece-dark, .piece-band, .piece-band-image, .piece-cover ) .piece-checklist > :is( li, p )::before,
section .piece-option.piece-option-featured .piece-checklist > :is( li, p )::before
{
    background-color: var( --accent-dark );
}