/*
 * Curious Octopus: layout and section components.
 * Ported verbatim from the site's Global Styles custom CSS (TT25, 2026-09-21)
 * so pages built with the co-* classes render the same under this theme.
 */

/* ===== One left axis =====
   Every section shares this inset, and the content column starts at it
   instead of being centred, so ribbons, headings, text and images all
   line up on the same left edge with the right side left open. */
:root{--co-inset:clamp(1.5rem,7vw,9rem);}
.co-sec{padding-left:var(--co-inset);padding-right:1.5rem;}
/* co-wide-media: text keeps a readable 645px measure, but pictures and the
   session list run wider off the same left edge, so the open right side has
   some rhythm instead of one narrow strip. */
.wp-block-group.co-sec.is-layout-constrained > figure.wp-block-image,
.wp-block-group.co-sec.is-layout-constrained > .wp-block-gallery,
.wp-block-group.co-sec.is-layout-constrained > .wp-block-columns,
.wp-block-group.co-sec.is-layout-constrained > .co-steps,
.wp-block-group.co-sec.is-layout-constrained > .co-anchor{
  max-width:min(880px,100%) !important;
}
.wp-block-group.co-sec.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  /* core prints margin:auto !important on constrained containers */
  margin-left:0 !important;
  margin-right:auto !important;
}

/* ===== Curious Octopus: section pennant =====
   Add class "co-pennant" to a heading or paragraph block.
   Variants: "is-tan" (use on navy sections), "is-terracotta".
   Nothing else on the site uses these classes. */
.co-pennant{
  display:block;
  width:fit-content;
  max-width:min(100%,44rem);
  margin:0 auto 2.5rem 0;
  /* the theme’s constrained layout sets auto margins; this overrides it for the pennant only */
  margin-left:0 !important;
  margin-right:auto !important;
  padding:.7em 3.2em .7em 1.15em;
  background:linear-gradient(90deg,#33415F,#23314D);
  color:#F6EFDF;
  clip-path:polygon(0 0,100% 0,calc(100% - 2.1em) 50%,100% 100%,0 100%);
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  line-height:1.35;
  font-weight:400;
  letter-spacing:0;
}
.co-pennant.is-tan{background:linear-gradient(90deg,#F6EFDF,#DED6C3);color:#23314D;}
.co-pennant.is-terracotta{background:linear-gradient(90deg,#E4805C,#D9663F);color:#FFFFFF;}
@media (max-width:781px){
  .co-pennant{padding-right:2.6em;clip-path:polygon(0 0,100% 0,calc(100% - 1.6em) 50%,100% 100%,0 100%);}
}
/* ===== Gallery captions sit below the image, not over it ===== */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static;
  background:none;
  padding:.55rem 0 0;
  margin:0;
  text-align:left;
  font-size:.82rem;
  line-height:1.35;
  color:inherit;
  max-width:none;
  overflow:visible;
}

/* ===== Hero: text sits inside the dark central circle of Several Circles =====
   The cover image uses object-position:38% 33%, which is the centre of the
   black disc. With object-fit:cover a percentage on the image maps to the
   same percentage of the container, so the box below lands on the disc at
   any desktop width. On phones the disc is too small for readable type,
   so the text recentres and widens. */
.co-hero .wp-block-cover__image-background{transform:scale(1.38);transform-origin:38% 33%;}
.co-hero > .wp-block-cover__inner-container{
  position:absolute;
  left:38%;
  top:35.5%;
  transform:translate(-50%,-50%);
  width:46%;
  max-width:none;
  text-align:center;
  z-index:1;
}
.co-hero > .wp-block-cover__inner-container h1{
  font-size:clamp(1.4rem,2.85vw,3.1rem);
  max-width:none;
  line-height:1.16;
  margin:0 0 .65em;
}
.co-hero > .wp-block-cover__inner-container p{
  font-size:clamp(.85rem,1.05vw,1.15rem);
  max-width:none;
  line-height:1.4;
  margin:0;
}
@media (max-width:781px){
  /* On a phone the disc is only ~180px across, too small for readable type,
     so the painting is zoomed about the disc centre. The disc then stays put
     (the scale origin and the object-position are the same point) and grows
     to roughly the width of the text. */
  .co-hero .wp-block-cover__image-background{transform:scale(2.3);transform-origin:38% 33%;}
  .co-hero > .wp-block-cover__inner-container{
    left:38%;
    top:33%;
    width:62%;
  }
  .co-hero > .wp-block-cover__inner-container h1{font-size:clamp(1.1rem,5vw,1.5rem);}
  .co-hero > .wp-block-cover__inner-container p{font-size:.82rem;}
}

/* ===== Reduced saturation (30% down) on the marble-run photo ===== */
.co-desat img{filter:saturate(0.7);}

/* Hero height is width-driven so the painting is framed the same on every
   screen, instead of zooming in on short laptop windows. */
.co-hero{min-height:max(62vh,38vw) !important;}
@media (max-width:781px){.co-hero{min-height:78vh !important;}}

/* the hero title breaks after "a sound," on desktop; on a phone that line
   is wider than the disc, so the break is dropped and the text rewraps */
@media (max-width:781px){.co-hero h1 br{display:none;}}

/* ===== The question that closes the week =====
   co-rhyme is the line that names what the photo just showed; the question
   sits behind a terracotta rule so the eye stops on it. */
.co-rhyme{margin-top:1.6rem;}
.co-question{
  border-left:4px solid #D9663F;
  padding:.2rem 0 .3rem 1.5rem;
  margin:2.2rem 0 0;
}
.co-question__eyebrow{
  margin:0 0 .55rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:#D9663F;
}
.co-question__q{
  margin:0;
  font-size:clamp(1.45rem,2.6vw,2.15rem);
  line-height:1.2;
  color:#23314D;
}
.co-next{
  margin-top:1.5rem;
  font-style:italic;
}

/* ===== One artwork, five sessions =====
   Replaces the week-structure image. The artwork sits at the head of a
   spine that runs down through five numbered sessions, so the single
   work of art visibly feeds all five. */
.co-anchor{
  position:relative;
  display:grid;
  grid-template-columns:6rem 1fr;
  column-gap:1.4rem;
  grid-template-rows:min-content min-content;
  align-content:center;
  min-height:6rem;
  margin:2.8rem 0 0;
  padding-bottom:2rem;
}
.co-anchor::after{
  content:"";position:absolute;left:calc(3rem - 1px);
  top:6rem;bottom:0;width:2px;background:rgba(35,49,95,.16);
}
.co-anchor__art{grid-column:1;grid-row:1 / -1;margin:0;}
.co-anchor__art img{
  width:6rem;height:6rem;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 5px #F6EFDF, 0 0 0 7px rgba(35,49,95,.18);
}
.co-anchor__label{
  grid-column:2;margin:0 0 .3rem;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:#D9663F;
}
.co-anchor__title{grid-column:2;margin:0;font-size:1rem;}

.co-step{
  display:grid;
  grid-template-columns:6rem 1fr;
  column-gap:1.4rem;
  position:relative;
  padding-bottom:2.4rem;
}
.co-step > *{grid-column:2;}
.co-step::before{
  content:"";position:absolute;left:calc(3rem - 1px);
  top:0;bottom:0;width:2px;background:rgba(35,49,95,.16);
}
.co-step:last-child::before{display:none;}
.co-step__n{
  grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;
  width:3.2rem;height:3.2rem;border-radius:50%;
  background:#23314D;color:#F6EFDF;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--fraunces);
  font-size:1.25rem;line-height:1;margin:0;
  position:relative;z-index:1;
}
.co-step__meta{
  margin:.4rem 0 .3rem;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:#D9663F;
}
.co-step__q{
  margin:0 0 .5rem;max-width:none;
  font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.25;color:#23314D;
}
.co-step__do{margin:0 0 .6rem;font-size:.94rem;}
.co-step__book{
  margin:0;font-size:.82rem;color:#23314D;opacity:.7;
}
@media (max-width:600px){
  .co-anchor,.co-step{grid-template-columns:3.6rem 1fr;column-gap:1rem;}
  .co-anchor::after,.co-step::before{left:calc(1.8rem - 1px);}
  .co-anchor__art img{width:3.6rem;height:3.6rem;}
  .co-anchor::after{top:3.6rem;}
  .co-step__n{width:2.6rem;height:2.6rem;font-size:1.05rem;}
}

/* ===== Two navy sections run together =====
   The theme puts a default block gap between sibling sections, which let a
   cream stripe through between the two navy ones. Closing the gap and the
   second section's top padding makes them read as one field. */
.co-sec.has-custom-navy-background-color + .co-sec.has-custom-navy-background-color{
  /* -1px overlap: two abutting same-coloured blocks can show a hairline
     at fractional device pixel ratios */
  margin-top:-1px;
  padding-top:0;
}


/* ===== The Daybook section =====
   The essay used to be one unbroken column. Three anchors break it now:
   the Leonardo pair near the top, the portfolio/daybook contrast at the
   midpoint, and the closing line at display size. */
.co-lede{
  font-family:var(--wp--preset--font-family--fraunces);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.35;
  color:#23314D;
  margin:0 0 1.8rem;
  max-width:none;
}

.co-credit{font-size:.78rem;line-height:1.4;opacity:.7;margin-top:.6rem;}

.co-essay{
  border-left:2px solid rgba(35,49,95,.18);
  padding-left:1.8rem;
  margin:2.6rem 0 2.8rem;
}
.co-essay p{margin:0 0 1.1rem;}

.co-contrast{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:1.2rem;
  margin:2rem 0 2.2rem;
}
/* the theme's flow layout puts a top margin on the second child, which
   knocked the two cards out of alignment inside the grid */
.co-contrast > *{margin-top:0 !important;margin-bottom:0 !important;}
.co-contrast__side{
  padding:1.35rem 1.4rem;
  border-radius:3px;
  border:1px solid transparent;
  display:flex;
  flex-direction:column;
}
/* the old way is drawn as an empty outline, the new way as a solid field,
   so the difference is structural rather than a flat grey block */
.co-contrast__side.is-portfolio{
  background:transparent;
  border-color:rgba(35,49,95,.28);
}
.co-contrast__side.is-daybook{
  background:#23314D;
  border-color:#23314D;
}
.co-contrast__label{
  margin:0 0 .45rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
.is-portfolio .co-contrast__label{color:#23314D;opacity:.55;}
.is-daybook .co-contrast__label{color:#E4805C;}
.co-contrast__q{
  margin:0;max-width:none;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.25;
}
.is-portfolio .co-contrast__q{color:#23314D;opacity:.62;}
.is-daybook .co-contrast__q{color:#F6EFDF;}

.co-essay__close{
  margin:1.8rem 0 1.4rem;max-width:none;
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.2;color:#23314D;
}
.co-byline{margin:0;font-size:.85rem;line-height:1.5;opacity:.8;}
.co-pad img{max-width:190px;}
@media (max-width:600px){
  .co-contrast{grid-template-columns:1fr;}
  .co-essay{padding-left:1.1rem;}
}

/* ===== Leonardo as marginal notes, not exhibits =====
   The two notebook images sit small and floated beside the text they
   support, one at the opening and one where the essay says the daybook
   keeps the whole record. */
.co-open::after{content:"";display:block;clear:both;}
.co-marginal{margin:.35rem 0 1rem 1.6rem;}
.co-marginal.alignleft{margin:.35rem 1.4rem 1rem 0;}
.co-marginal figcaption{
  font-size:.7rem;line-height:1.35;opacity:.65;
  margin-top:.4rem;text-align:left;
}
.co-marginal.is-edge figcaption{font-size:.66rem;}
/* floats must not run into the blocks that follow */
.co-essay,.co-contrast,.co-essay__close{clear:both;}
.co-essay::after{content:"";display:block;clear:both;}
@media (max-width:600px){
  .co-marginal{float:none !important;margin:1rem 0;}
  .co-marginal img{max-width:140px;}
}

/* About page (templates/page-about.html, patterns/about.php) */
.co-about .cw-band h1{
  font-family:var(--cw-display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;margin:0;text-wrap:balance;
}
.co-about .co-portrait{width:min(15rem,60vw);margin:0 0 .6rem !important;}
.co-about .co-portrait img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:6px solid #fff;border-radius:2px;box-shadow:0 10px 30px rgba(35,49,77,.18);
}
/* the homepage's ghost button is styled for dark bands; this one sits on cream */
.co-about .co-ghost-dark .wp-block-button__link{
  background:transparent;border-color:rgba(35,49,77,.45);color:var(--cw-navy);
}

/* ===== Footer credits =====
   Centred, and only as wide as the first line, so the rule above the Quidoris
   line can be two thirds of that line. One line of space separates the two,
   and the Quidoris line is 1pt smaller than the credit line. */
.wp-block-group.co-footer-credits{width:fit-content;max-width:100%;margin-inline:auto;}
.co-footer-credits > p{margin:0;}
.co-footer-credits > p.co-footer-quidoris{margin-top:1lh;font-size:calc(var(--wp--preset--font-size--small) - 1pt);}
.co-footer-quidoris::before{content:"";display:block;width:66.667%;margin:0 auto .45em;border-top:1px solid currentColor;}

/* ===== Library: pillar, /art/ and /curriculum/ (inc/library.php) ===== */
.co-lib .cw-band h1{
  font-family:var(--cw-display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;margin:0;text-wrap:balance;
}
.co-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;font-size:.82rem;opacity:.8}
.co-crumbs li+li::before{content:"›";margin-right:.35rem;opacity:.6}
.co-crumbs a{color:inherit}
.co-byline{font-size:.82rem!important;opacity:.7}
.co-lib-art{margin:.6rem 0 0!important;max-width:min(34rem,100%)}
.co-lib-art img{width:100%;height:auto;display:block;border:6px solid #fff;border-radius:2px;box-shadow:0 10px 30px rgba(35,49,77,.18)}
.co-lib-art figcaption{font-size:.8rem;opacity:.7;margin-top:.5rem}
.co-prose h2{margin-top:1.2rem!important}
.co-prose ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.co-prose a{color:var(--cw-navy);text-underline-offset:.15em}
.wp-block-group.cw-stack.co-lib-wide{max-width:var(--cw-media)!important}

/* Cards that list library pages */
.co-lib-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:.4rem 0 1rem}
.co-lib-card{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;border:1px solid var(--cw-rule);border-radius:3px;background:rgba(255,255,255,.45);color:var(--cw-ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.co-lib-card:hover,.co-lib-card:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(35,49,77,.12)}
.co-lib-card strong{font-family:var(--cw-display);font-weight:400;font-size:1.12rem;line-height:1.25}
.co-lib-card span{font-size:.88rem;opacity:.78;line-height:1.45}
.co-lib .co-lib-card{color:var(--cw-ink);text-decoration:none}
.co-lib .co-lib-card.co-lib-card-hub{background:var(--cw-navy);color:var(--cw-cream);border-color:var(--cw-navy)}

/* Back to the pillar, and on to the rest of the library */
.co-lib-onward a{color:var(--cw-cream)}
.co-lib-onward h2 a{text-decoration-color:var(--cw-terra-light);text-underline-offset:.2em}
.co-lib-more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.co-lib-more a{display:inline-block;padding:.4em .9em;border:1px solid rgba(246,239,223,.4);border-radius:2em;font-size:.88rem;text-decoration:none}
.co-lib-more a:hover{border-color:var(--cw-terra-light)}
.co-lib-sources ul{margin:0;padding-left:1.2rem;font-size:.9rem}
.co-lib-sources h2{font-size:1.2rem!important}

/* Check it against the standards */
.co-standards .cw-lede{color:var(--cw-cream)}
.co-standards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:.6rem}
.co-standards-card{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.3rem 1.3rem 1.2rem 3.2rem;border:1px solid rgba(246,239,223,.22);border-radius:4px;background:var(--cw-navy-soft)}
.co-standards-card::before{content:"✓";position:absolute;left:1.1rem;top:1.15rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--cw-terra);color:#fff;font-size:.85rem;font-weight:700;display:grid;place-items:center}
.co-standards-card p{margin:0}
.co-standards-label{font-size:.72rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cw-terra-light)}
.co-standards-go,.co-standards-soon{margin-top:auto;align-self:flex-start;font-size:.82rem;font-weight:600;padding:.35em .9em;border-radius:2em}
.co-standards-go{background:var(--cw-terra);color:#fff;text-decoration:none}
.co-standards-soon{border:1px dashed rgba(246,239,223,.45);opacity:.85}
.co-standards-note{font-size:.88rem!important;opacity:.8}

/* ===== HTML sitemap (/sitemap/, inc/sitemap-html.php) =====
   A "jump to any page" pick list, then 3D cards that drop down their links, each
   with the octopus peeking from a different corner. Every link has a speech
   bubble saying what the page is. */
.co-sitemap{--co-sea:#4F8FB0;overflow-x:clip}
.co-sitemap-pick{max-width:42rem;margin:0 0 1.8rem!important;padding:1.3rem 1.5rem;border-radius:14px;background:var(--cw-navy);color:var(--cw-cream);box-shadow:6px 6px 0 var(--cw-terra),0 16px 30px -10px rgba(35,49,77,.4)}
.co-sitemap-pick label{display:block;font-family:var(--cw-display);font-size:1.35rem;margin-bottom:.7rem}
.co-sitemap-pick-row{display:flex;flex-wrap:wrap;gap:.7rem}
.co-sitemap-pick select{flex:1 1 15rem;min-width:0;font:inherit;font-size:1rem;padding:.7rem .8rem;border:2px solid var(--cw-cream);border-radius:10px;background:var(--cw-cream);color:var(--cw-navy);cursor:pointer}
.co-sitemap-pick select:focus-visible,.co-sitemap-pick button:focus-visible{outline:3px solid var(--cw-terra-light);outline-offset:2px}
.co-sitemap-pick button{font:inherit;font-weight:700;padding:.7rem 1.3rem;border:0;border-radius:10px;background:var(--cw-terra);color:#fff;cursor:pointer;box-shadow:0 4px 0 #A9472A;transition:translate .12s,box-shadow .12s}
.co-sitemap-pick button:hover{translate:0 -2px;box-shadow:0 6px 0 #A9472A}
.co-sitemap-pick button:active{translate:0 3px;box-shadow:0 1px 0 #A9472A}
.co-sitemap-pick button span{display:inline-block;transition:translate .2s}
.co-sitemap-pick button:hover span{translate:4px 0}
.co-sitemap-pick-note{margin:.7rem 0 0!important;font-size:.9rem!important;opacity:.85}
.co-sitemap-pick-note:empty{display:none}
.co-sitemap-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.co-sitemap-tools p{margin:0!important;font-size:.95rem!important;opacity:.8}
.co-sitemap-all{font:inherit;font-size:.85rem;font-weight:700;padding:.4em 1.1em;border:2px solid var(--cw-navy);border-radius:2em;background:transparent;color:var(--cw-navy);cursor:pointer;transition:background .15s,color .15s}
.co-sitemap-all:hover,.co-sitemap-all[aria-pressed=true]{background:var(--cw-navy);color:var(--cw-cream)}
.co-sitemap-all[hidden]{display:none}

.co-sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:3.4rem 3.8rem;align-items:start;padding:2.4rem 1.9rem 2rem}
.co-sitemap-card{--co-accent:var(--cw-terra);--co-tilt:-.6deg;position:relative;padding:1.5rem 1.4rem 1.25rem;border:2px solid var(--cw-navy);border-radius:14px;background:#FFFDF8;box-shadow:6px 6px 0 var(--co-accent),0 18px 30px -12px rgba(35,49,77,.35);rotate:var(--co-tilt);transition:rotate .3s cubic-bezier(.3,1.6,.5,1),translate .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.co-sitemap-card:nth-child(4n+2){--co-accent:var(--co-sea);--co-tilt:.7deg}
.co-sitemap-card:nth-child(4n+3){--co-accent:var(--cw-navy);--co-tilt:-.3deg}
.co-sitemap-card:nth-child(4n+4){--co-accent:var(--cw-terra-light);--co-tilt:.5deg}
.co-sitemap-card[open]{rotate:0deg;z-index:2}
.co-sitemap-card:hover,.co-sitemap-card:focus-within{rotate:0deg;translate:-3px -4px;box-shadow:10px 11px 0 var(--co-accent),0 26px 40px -14px rgba(35,49,77,.45);z-index:3}

/* The octopus: peeking over the top left, the top right, then clinging to the
   bottom of the left side and the right side, and round again. Mirrored on the
   right so it looks in at the card. Only the top ones reach into the row gap, so
   octopuses on neighbouring cards never bump. */
.co-sitemap-card::before{content:"";position:absolute;top:-32px;left:-28px;width:62px;height:57px;background:var(--co-octo) center/contain no-repeat;rotate:-16deg;pointer-events:none;filter:drop-shadow(2px 3px 2px rgba(35,49,77,.25))}
.co-sitemap-card:nth-child(4n+2)::before{left:auto;right:-28px;scale:-1 1;rotate:16deg}
.co-sitemap-card:nth-child(4n+3)::before{top:auto;bottom:6px;left:-46px;rotate:24deg}
.co-sitemap-card:nth-child(4n+4)::before{top:auto;bottom:6px;left:auto;right:-46px;scale:-1 1;rotate:24deg}
.co-sitemap-card:hover::before{animation:co-octo-wiggle .8s ease-in-out}
@keyframes co-octo-wiggle{0%,100%{translate:0 0}20%{translate:0 -7px}40%{translate:3px -2px}60%{translate:-2px -5px}80%{translate:0 -1px}}

.co-sitemap-card summary{display:flex;flex-direction:column;gap:.45rem;list-style:none;cursor:pointer;border-radius:8px}
.co-sitemap-card summary::-webkit-details-marker{display:none}
.co-sitemap-card summary:focus-visible{outline:3px solid var(--co-accent);outline-offset:6px}
.co-sitemap-card h2{font-size:1.3rem!important;margin:0!important;padding-bottom:.45rem;border-bottom:3px solid var(--co-accent)}
.co-sitemap-card summary p{font-size:.86rem!important;opacity:.78;margin:0!important}
.co-sitemap-count{align-self:flex-start;display:inline-flex;align-items:center;gap:.55em;margin-top:.35rem;padding:.35em .9em;border-radius:2em;background:var(--cw-navy);color:var(--cw-cream);font-size:.78rem;font-weight:700;letter-spacing:.03em;transition:background .2s}
.co-sitemap-count::after{content:"";width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .25s,translate .25s}
.co-sitemap-card summary:hover .co-sitemap-count{background:var(--cw-terra)}
.co-sitemap-card[open] .co-sitemap-count::after{rotate:225deg;translate:0 2px}

.co-sitemap-card ul{list-style:none;margin:1rem 0 0!important;padding:.8rem 0 0!important;border-top:2px dashed var(--cw-rule);display:flex;flex-direction:column;gap:.1rem!important}
.co-sitemap-card[open] ul{animation:co-sitemap-drop .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes co-sitemap-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
.co-sitemap-card li{position:relative;font-size:.94rem}
.co-sitemap-card a{display:inline-flex;align-items:center;padding:.25rem .4rem .3rem .2rem;margin-left:-.2rem;color:var(--cw-navy);text-decoration:none;background:linear-gradient(var(--co-accent),var(--co-accent)) .2rem 100%/0 3px no-repeat;transition:background-size .25s,color .2s,translate .2s}
.co-sitemap-card a::before{content:"";flex:none;width:0;height:1.05em;margin-right:0;background:var(--co-octo) center/contain no-repeat;opacity:0;rotate:-30deg;transition:width .25s,margin .25s,opacity .2s,rotate .35s cubic-bezier(.3,1.8,.5,1)}
.co-sitemap-card a:hover,.co-sitemap-card a:focus-visible{color:var(--cw-terra);translate:3px 0;background-size:calc(100% - .6rem) 3px}
.co-sitemap-card a:hover::before,.co-sitemap-card a:focus-visible::before{width:1.15em;margin-right:.4em;opacity:1;rotate:0deg}

/* The speech bubble: what the page is. */
.co-sitemap-tip{position:absolute;left:0;bottom:calc(100% + .3rem);z-index:5;width:max-content;max-width:min(18rem,75vw);padding:.6rem .85rem;border-radius:12px;background:var(--cw-navy);color:var(--cw-cream);font-size:.8rem;line-height:1.4;box-shadow:4px 4px 0 var(--co-accent),0 10px 24px rgba(35,49,77,.3);opacity:0;visibility:hidden;pointer-events:none;translate:0 .45rem;scale:.9;transform-origin:1.2rem 100%;transition:opacity .15s,visibility .15s,translate .25s cubic-bezier(.3,1.6,.5,1),scale .25s cubic-bezier(.3,1.6,.5,1)}
.co-sitemap-tip::after{content:"";position:absolute;top:100%;left:1rem;border:7px solid transparent;border-top-color:var(--cw-navy)}
.co-sitemap-card li:hover .co-sitemap-tip,.co-sitemap-card a:focus-visible + .co-sitemap-tip{opacity:1;visibility:visible;translate:0 0;scale:1}
.co-sitemap-xml{font-size:.82rem!important;opacity:.7;margin-top:.4rem!important}

@media (max-width:600px){
  .co-sitemap-grid{padding:2.2rem 1.9rem 1.8rem;gap:2.6rem}
  .co-sitemap-card::before{width:50px;height:46px;top:-26px;left:-20px}
  .co-sitemap-card:nth-child(4n+2)::before{right:-20px}
  .co-sitemap-card:nth-child(4n+3)::before{left:-30px}
  .co-sitemap-card:nth-child(4n+4)::before{right:-30px}
}
@media (prefers-reduced-motion:reduce){
  .co-sitemap *,.co-sitemap *::before{transition:none!important;animation:none!important}
  .co-sitemap-card{rotate:none}
}

/* Footer "Sitemap" menu link (patterns/footer.php): the link's description is hidden
   and pops up above it on hover and keyboard focus. */
.co-sitemap-navlink{position:relative}
/* WordPress hides navigation link descriptions; show this one (as the pop-up). */
.wp-block-navigation .co-sitemap-navlink .wp-block-navigation-item__description{display:block}
.co-sitemap-navlink .wp-block-navigation-item__description{
  position:absolute;bottom:calc(100% + .6rem);right:0;width:max-content;max-width:min(20rem,80vw);
  padding:.6rem .8rem;border-radius:4px;background:var(--cw-navy);color:var(--cw-cream);
  font-size:.8rem;line-height:1.4;text-align:left;white-space:normal;
  box-shadow:0 8px 22px rgba(35,49,77,.25);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(.3rem);
  transition:opacity .15s,transform .15s;z-index:10;
}
.co-sitemap-navlink .wp-block-navigation-item__description::after{
  content:"";position:absolute;top:100%;right:1rem;border:6px solid transparent;border-top-color:var(--cw-navy);
}
.co-sitemap-navlink:hover .wp-block-navigation-item__description,
.co-sitemap-navlink:focus-within .wp-block-navigation-item__description{opacity:1;visibility:visible;transform:none}
@media (max-width:600px){
  .co-sitemap-navlink .wp-block-navigation-item__description{right:auto;left:0}
  .co-sitemap-navlink .wp-block-navigation-item__description::after{right:auto;left:1rem}
}