/* Notebook look. Everything here is decoration; colours/fonts/sizes come from theme.json. */
:root{--gd-line:#cfe0f3;--wob:255px 18px 225px 18px/18px 225px 18px 255px}
body{background:var(--wp--preset--color--paper) repeating-linear-gradient(transparent 0 35px,var(--gd-line) 35px 36px)}
:focus-visible{outline:3px dashed var(--wp--preset--color--ink);outline-offset:4px}
.gd-page{position:relative;max-width:1120px;margin-inline:auto;padding:0 22px 0 64px}
.gd-page::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;background:rgba(232,64,58,.5)}
.gd-page>*{max-width:none}
.wp-block-group.gd-page>main{margin-block:0}
.gd-bar{padding:20px 0 6px}
.gd-logo,.gd-logo a{font-family:var(--wp--preset--font-family--hand);text-decoration:none}
.gd-nav a{font-weight:700;font-size:.95rem;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.gd-nav .current-menu-item>a,.gd-nav .current_page_item>a{background:linear-gradient(transparent 62%,var(--wp--preset--color--yellow) 62% 88%,transparent 88%)}
.gd-nav a:hover{text-decoration:underline wavy var(--wp--preset--color--red);text-underline-offset:5px}
.gd-foot{padding:40px 0 28px}
main h1{margin-block:28px 16px}

/* photos as taped snapshots: add class "snap" (and optionally "tilt-l"/"tilt-r") to an Image block */
.snap{position:relative;background:#fff;padding:10px 10px 12px;box-shadow:0 8px 16px -8px rgba(34,48,74,.5);transform:rotate(-2deg)}
.snap.tilt-r{transform:rotate(2.5deg)}
.snap::before{content:"";position:absolute;width:86px;height:26px;background:rgba(255,210,63,.75);top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:1}
.snap img{width:100%;object-fit:cover}

/* the circled word: class "word" on a Paragraph; add "w-blue", "w-green" or "w-red" */
.word{font-family:var(--wp--preset--font-family--hand);font-size:3.6rem;line-height:1;display:inline-block;padding:6px 18px;border:4px solid var(--c,var(--wp--preset--color--blue));border-radius:var(--wob);transform:rotate(-3deg);margin:0}
.w-blue{--c:var(--wp--preset--color--blue)}.w-green{--c:var(--wp--preset--color--green)}.w-red{--c:var(--wp--preset--color--red)}
.gd-item{margin-bottom:34px;gap:30px}
.gd-item h3{margin:0 0 2px}.gd-item p{max-width:25em}

/* star chart: class "star" on a Group, plus "s-yellow" etc */
.star::before{content:"";display:block;width:84px;height:84px;margin:0 auto 6px;background:var(--s,#ffd23f);filter:drop-shadow(2px 3px 0 rgba(34,48,74,.3));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 4l9.5 22.5L74 29l-18.5 16 5.5 24L40 55 19 69l5.5-24L6 29l24.5-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 4l9.5 22.5L74 29l-18.5 16 5.5 24L40 55 19 69l5.5-24L6 29l24.5-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-8deg)}
.star{text-align:center}.star:nth-child(even)::before{transform:rotate(7deg)}
.s-yellow{--s:#ffd23f}.s-pink{--s:#ff8a80}.s-green{--s:#7fd6a4}.s-blue{--s:#8ab8ff}
.star h3{margin:0}.star p{font-size:.98rem;line-height:1.5;margin:4px 0 0}

/* sticky note: class "gd-note" on a Group */
.gd-note{position:relative;max-width:760px;padding:34px 36px 38px;background:var(--wp--preset--color--note);box-shadow:0 10px 18px -10px rgba(34,48,74,.55);transform:rotate(-1deg);margin-bottom:70px}
.gd-note::before{content:"";position:absolute;width:86px;height:26px;background:rgba(255,210,63,.75);top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg)}
.gd-tel a{font-family:var(--wp--preset--font-family--hand);font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.1;text-decoration:none;display:inline-block;padding:4px 22px;border:4px solid var(--wp--preset--color--red);border-radius:var(--wob)}
.gd-note .gd-mail a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

.is-style-outline .wp-block-button__link,.wp-block-button.is-style-outline>.wp-block-button__link{background:#fff;color:var(--wp--preset--color--ink);border:3px solid var(--wp--preset--color--ink);padding:3px 25px}
.wp-block-button__link{box-shadow:3px 4px 0 var(--wp--preset--color--ink)}
.is-style-outline .wp-block-button__link{box-shadow:none}

@media(max-width:860px){
  .gd-page{padding:0 18px 0 40px}.gd-page::before{left:24px}
  .gd-item{flex-direction:column;align-items:flex-start!important}
  .gd-stars,.gd-wall{flex-wrap:wrap!important}.gd-stars>*{flex-basis:44%!important}.gd-wall>*{flex-basis:calc(50% - 11px)!important}
  .gd-note{padding:28px 22px 30px}
}
@media(prefers-reduced-motion:no-preference){.snap,.word{transition:transform .2s}.snap:hover{transform:rotate(0)}}
.gd-hero-img img{aspect-ratio:1/1.05}.gd-item-img img{aspect-ratio:4/3}.gd-wall{gap:22px;margin-bottom:10px}
.snap{box-sizing:border-box}.gd-wall>.snap{flex:1 1 calc(25% - 17px)}.gd-wall .snap img{aspect-ratio:3/4}
.gd-wall>.snap:nth-child(2){margin-top:20px;transform:rotate(2deg)}.gd-wall>.snap:nth-child(3){transform:rotate(-1.5deg)}.gd-wall>.snap:nth-child(4){margin-top:12px;transform:rotate(3deg)}
.gd-stars{margin-bottom:40px}.wp-block-columns{gap:30px}
main h2{margin-block:50px 14px}
/* text stays readable inside the 1120px content width */
.wp-block-post-content>:is(p,ul,ol,h2,h3){max-width:42em;margin-left:0!important}
main .wp-block-columns p{max-width:30em}
.gd-note{margin-left:0!important}