/* Postcard Reels. The band is a surface pair, navy and sand, when Designed;
 * under Use my theme it is a hairline on the theme's ground and the postcards
 * take the theme's plate pair. An owner's Band colour wins over both.
 * Still (no JavaScript, reduced motion, motion off, the editor) the two postcard
 * columns flow into one grid beside the copy. Running, marquee@2 wraps each
 * column in a viewport, and the band that holds one becomes the stage: the
 * columns tilt and run off its top and bottom edges. */
.patternpaste-designed-postcards{--ppc-band:transparent;--ppc-band-ink:currentColor;--ppc-dot:currentColor;--ppc-card:var(--pp-plate);--ppc-card-ink:var(--pp-plate-ink);--ppc-card-gap:16px;--ppc-strip:clamp(230px,64cqi,320px)}
.patternpaste-designed-postcards[data-treatment="designed"]{--ppc-band:#15223b;--ppc-band-ink:#f4efe6;--ppc-dot:#f2b35e;--ppc-card:#fbf7ef;--ppc-card-ink:#15223b;font-family:Arial,Helvetica,sans-serif}
.patternpaste-designed-postcards[data-treatment="designed"]:not(.has-background){background:#efe8da}
.patternpaste-designed-postcards[data-treatment="designed"]:not(.has-text-color){color:#15171c}
.patternpaste-designed-postcards[data-treatment="inherit"]:not(.has-background):not([class*="is-style-"]){background:transparent}
.patternpaste-designed-postcards[data-treatment="inherit"]:not(.has-text-color):not([class*="is-style-"]){color:inherit}

.patternpaste-designed-postcards .patternpaste-postcards-band{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--patternpaste-designed-block-gap,clamp(28px,4cqi,64px));align-items:center;padding:clamp(40px,6cqi,88px) clamp(24px,5cqi,72px);border-radius:clamp(18px,2.4cqi,30px);overflow:clip}
.patternpaste-designed-postcards .patternpaste-postcards-band:not(.has-background){background:var(--ppc-band)}
.patternpaste-designed-postcards .patternpaste-postcards-band:not(.has-text-color){color:var(--ppc-band-ink)}
/* Under Use my theme a hairline marks the band, drawn above the reels so a passing postcard never breaks it. */
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-band::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-item{outline:1px solid color-mix(in srgb,currentColor 14%,transparent);outline-offset:-1px}

.patternpaste-designed-postcards .patternpaste-postcards-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:34rem}
.patternpaste-designed-postcards .patternpaste-postcards-copy:not(.has-background){background:transparent}
.patternpaste-designed-postcards .patternpaste-postcards-copy:not(.has-text-color){color:inherit}
.patternpaste-designed-postcards .patternpaste-postcards-copy :where(h2,p):not(.has-text-color){color:inherit}
.patternpaste-designed-postcards .patternpaste-postcards-label{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.patternpaste-designed-postcards .patternpaste-postcards-label::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.patternpaste-designed-postcards .patternpaste-postcards-band:not(.has-background):not(.has-text-color) .patternpaste-postcards-label::before{background:var(--ppc-dot)}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-label{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:500}
.patternpaste-designed-postcards .patternpaste-postcards-heading{max-width:12ch;margin:18px 0 0;font-size:clamp(38px,5cqi,66px);line-height:1.02;letter-spacing:-.03em;overflow-wrap:normal}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-heading{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.patternpaste-designed-postcards .patternpaste-postcards-lede{max-width:44ch;margin:18px 0 0;font-size:17px;line-height:1.6}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-band:not(.has-background):not(.has-text-color) .patternpaste-postcards-lede:not(.has-text-color){color:#c9d0dc}
.patternpaste-designed-postcards .patternpaste-postcards-actions{gap:12px;margin-top:28px}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-actions .wp-block-button__link{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:999px;font:700 15px/1.2 Arial,Helvetica,sans-serif}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-actions .wp-block-button:not(.is-style-outline)>.wp-block-button__link:not(.has-background){background:#f2b35e}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-actions .wp-block-button:not(.is-style-outline)>.wp-block-button__link:not(.has-text-color){color:#15171c}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link{border-color:color-mix(in srgb,currentColor 40%,transparent);font:500 13px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.patternpaste-designed-postcards[data-treatment="designed"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link:not(.has-background){background:transparent}
.patternpaste-designed-postcards .patternpaste-postcards-band .is-style-outline>.wp-block-button__link:not(.has-text-color){color:inherit}
/* Use my theme: the outline button is the copy's own ink drawn on whatever ground is under it.
 * A theme's global button rule and a section style's button pair are both zero-specificity and
 * print after core's outline style, so they filled it (Reading Room: a pale accent under an
 * accent tint) while its label kept the band's light ink. Transparent here, label in the
 * inherited text colour, so it reads on the page, a section style or an owner's colour.
 * Only the border's colour is taken, never its width or style: a theme that draws outline
 * buttons with no border keeps it bare (a text link, as everywhere else on the buyer's site),
 * and one that draws a border keeps its own weight (TT4's 2px) in the section's ink. */
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link:not(.has-background){background-color:transparent;background-image:none}
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link:not(.has-background):is(:hover,:focus-visible){background-color:color-mix(in srgb,currentColor 10%,transparent)}
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link:not(.has-text-color){color:inherit}
.patternpaste-designed-postcards[data-treatment="inherit"] .patternpaste-postcards-actions .is-style-outline>.wp-block-button__link:not(.has-border-color){border-color:currentColor}
/* Use my theme on a ground the owner paints (section, band or copy): the theme's button pair
 * can be that ground (TT5 contrast on a black section) and the primary vanished. There the
 * primary is the owner's own pair turned over: filled with their text colour, the label cut
 * out in their ground. The ground reaches the label as an inherited background-color clipped
 * to the glyphs; every level between the copy and the label clips to text too, so none paints
 * over the fill, which sits behind the label in the copy's stacking context. On the page's
 * ground or a section style the theme's own button stands. */
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) :where(:has(.patternpaste-postcards-copy)):not(.has-background){background-color:inherit}
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) .patternpaste-postcards-copy:not(.has-background){background-color:inherit}
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) .patternpaste-postcards-copy :where(:has(.wp-block-button__link)):not(.has-background){background-color:inherit;-webkit-background-clip:text;background-clip:text}
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) .patternpaste-postcards-actions .wp-block-button:not(.is-style-outline)>.wp-block-button__link:not(.has-background):not(.has-text-color){position:relative;color:inherit;background-color:inherit;background-image:none;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) .patternpaste-postcards-actions .wp-block-button:not(.is-style-outline)>.wp-block-button__link:not(.has-background):not(.has-text-color)::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:currentColor;pointer-events:none}
.patternpaste-designed-postcards[data-treatment="inherit"]:is(.has-background,:has(:is(.patternpaste-postcards-band,.patternpaste-postcards-copy,.patternpaste-postcards-actions).has-background)):not([class*="-gradient-background"]) .patternpaste-postcards-actions .wp-block-button:not(.is-style-outline)>.wp-block-button__link:not(.has-background):not(.has-text-color):is(:hover,:focus-visible)::before{background:color-mix(in srgb,currentColor 84%,transparent)}

/* The still grid: both columns flow into it, every postcard in reach. */
.patternpaste-designed-postcards .patternpaste-postcards-reels{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(8.5rem,100%),1fr));gap:var(--ppc-card-gap);align-items:start;min-width:0}
.patternpaste-designed-postcards .patternpaste-postcards-track{display:contents}
.patternpaste-designed-postcards .patternpaste-postcards-item{box-sizing:border-box;min-width:0;margin:0;padding:6px;border-radius:8px;box-shadow:0 18px 34px -18px rgb(0 0 0 / .6)}
.patternpaste-designed-postcards .patternpaste-postcards-item:not(.has-background){background:var(--ppc-card)}
.patternpaste-designed-postcards .patternpaste-postcards-item:not(.has-text-color){color:var(--ppc-card-ink)}
.patternpaste-designed-postcards .patternpaste-postcards-item :where(p):not(.has-text-color){color:inherit}
.patternpaste-designed-postcards .patternpaste-postcards-image{margin:0}
.patternpaste-designed-postcards .patternpaste-postcards-image img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.patternpaste-designed-postcards .patternpaste-postcards-place{margin:0;padding:7px 2px 1px;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase}

/* Running: the band holds a marquee viewport, so it is the stage. */
.patternpaste-designed-postcards .patternpaste-postcards-band:has(.patternpaste-marquee-viewport){min-height:clamp(420px,40cqi,540px)}
.patternpaste-designed-postcards .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels{position:absolute;z-index:0;top:-36%;bottom:-36%;right:6%;width:min(40%,480px);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;rotate:-6deg}
.patternpaste-designed-postcards .patternpaste-postcards-reels>.patternpaste-marquee-viewport{height:100%}
.patternpaste-designed-postcards .patternpaste-postcards-track.patternpaste-marquee-active{gap:18px}
.patternpaste-designed-postcards .patternpaste-postcards-band>.patternpaste-marquee-control{position:absolute;z-index:3;right:16px;bottom:16px;background:var(--ppc-card);color:var(--ppc-card-ink)}

/* The reel settings: class names the Designed panel writes on the section. */
.patternpaste-designed-postcards.postcards-flat .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels{rotate:none;top:-12%;bottom:-12%}
.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-reels{order:-1}
.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-copy{grid-column:2}
.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels{right:auto;left:5%;rotate:6deg}
.patternpaste-designed-postcards.postcards-reels-left.postcards-flat .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels{rotate:none}
.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band>.patternpaste-marquee-control{right:auto;left:16px}

/* The editor shows the still grid, every block in reach. */
.editor-styles-wrapper .patternpaste-designed-postcards :is(.patternpaste-postcards-band,.patternpaste-postcards-reels,.patternpaste-postcards-track)>.block-editor-inner-blocks,.editor-styles-wrapper .patternpaste-designed-postcards :is(.patternpaste-postcards-band,.patternpaste-postcards-reels,.patternpaste-postcards-track)>.block-editor-inner-blocks>.block-editor-block-list__layout{display:contents}

@container (max-width:700px){
  .patternpaste-designed-postcards .patternpaste-postcards-band,.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band{grid-template-columns:minmax(0,1fr)}
  .patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-reels{order:0}
  .patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-copy{grid-column:1}
  .patternpaste-designed-postcards .patternpaste-postcards-band:has(.patternpaste-marquee-viewport){min-height:0;padding-bottom:0}
  .patternpaste-designed-postcards .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels,.patternpaste-designed-postcards.postcards-reels-left .patternpaste-postcards-band:has(.patternpaste-marquee-viewport) .patternpaste-postcards-reels{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:var(--ppc-strip);gap:12px;rotate:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}
  .patternpaste-designed-postcards .patternpaste-postcards-track.patternpaste-marquee-active{gap:12px}
  .patternpaste-designed-postcards .patternpaste-postcards-reels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .patternpaste-designed-postcards .patternpaste-postcards-heading{font-size:clamp(34px,10cqi,48px)}
  .patternpaste-designed-postcards .patternpaste-postcards-lede{font-size:16px}
}