/* Social directory: video sidebar left, account directory right. Homepage unchanged. */
.social-page main {max-width:1680px}
.social-page main .social-directory {display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);grid-template-areas:"videos directory";gap:clamp(40px,3.8vw,68px);align-items:start;align-content:start;min-height:calc(100svh - var(--site-header-height,86px));padding:32px 0 44px;max-width:1348px;margin-inline:auto}
.social-page .social-links-content {grid-area:directory;min-width:0;width:100%;max-width:860px}
.social-page .social-introduction {text-align:left;margin:0}
.social-page main .social-introduction h1 {font-family:var(--heading);font-size:clamp(36px,3.2vw,52px);font-weight:700;line-height:1.15;margin:0 0 16px;letter-spacing:-.8px;color:var(--brick)}
.social-page main .social-introduction p {font-family:var(--body);font-size:20px;line-height:1.55;margin:0;max-width:68ch}
.social-page .social-divider {border:0;height:4px;border-radius:999px;background:var(--charcoal);margin:24px 0;width:100%}
.social-page .account-directory {display:grid;grid-template-columns:1fr;gap:20px;margin:0}
.social-page .account-group {display:grid;grid-template-columns:minmax(0,1fr) 144px;gap:24px;align-items:center;min-width:0;background:none;border:0;padding:0 0 20px;position:relative}
.social-page .account-group::after {content:"";position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:999px;background:#a28b70}
.social-page .account-group:last-child::after {display:none}
.social-page .account-intro {display:flex;gap:20px;align-items:center;min-height:140px;margin:0}
.social-page .account-description {min-width:0}
.social-page main .account-description p {font-size:18px;line-height:1.5;margin:8px 0 0;max-width:44ch}
.social-page .sketch-avatar,.social-page .craft-avatar {width:120px;height:120px;display:block;flex:none;border:0;border-radius:0;box-shadow:none}
.social-page .sketch-avatar {width:140px;height:140px}
.social-page .sketch-avatar {background-image:url('assets/social-sketch-portraits.webp');background-repeat:no-repeat;background-size:200% 100%;background-position:left center;filter:url('assets/portrait-ink-filter.svg#portrait-contrast')}
.social-page .sketch-avatar.judith {background-position:right center}
.social-page .craft-avatar {object-fit:contain}
.social-page main .account-intro h2 {font-size:28px;font-weight:700;line-height:1.2;margin:0;letter-spacing:-.3px;color:var(--brick)}
.social-page .account-actions {display:grid;grid-template-columns:1fr;gap:7px;width:144px;justify-self:end}
.social-page .account-actions .social-link {display:flex;width:100%;justify-content:flex-start;margin:0;background:#333333;border-color:#333333;color:white;--icon-cutout:#333333;font-size:16px;padding:7px 10px;min-height:44px}
.social-page .account-actions .social-link .platform-icon {width:22px;height:22px}
.social-page .account-actions .social-link:hover,.social-page .account-actions .social-link:focus-visible {background:#4b4b4b;border-color:#4b4b4b;--icon-cutout:#4b4b4b}
.social-page .account-actions .featured-channel {background:#d92525;border-color:#d92525;--icon-cutout:#d92525;color:#fff}
.social-page .account-actions .featured-channel:hover,.social-page .account-actions .featured-channel:focus-visible {background:#b51c1c;border-color:#b51c1c;--icon-cutout:#b51c1c;color:#fff}
.social-page .account-crafts {border:0;padding-bottom:0}
.social-page .account-crafts .account-intro {margin:0}
.social-page .social-followup {display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.social-page main>.social-next-section {min-height:max(280px,45svh);border-top:1px solid #b7a080;padding:64px 0;align-items:center;justify-content:center}
.social-page .social-next-section .social-followup {justify-content:center;margin:0}
.social-page .video-showcase {grid-area:videos;min-width:0;background:#333333;color:#fff3df;border-radius:24px;padding:16px 20px}
.social-page .showcase-heading {display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:14px}
.social-page main .showcase-heading h2 {font-family:var(--heading);font-size:clamp(14px,1.1vw,20px);font-weight:700;line-height:1.25;letter-spacing:-.3px;margin:0;color:#fff3df;white-space:nowrap;text-align:center}
.social-page .showcase-heading .youtube-primary {background:var(--brick);border-color:var(--brick);color:white;--icon-cutout:var(--brick);font-size:16px;padding:7px 11px;min-height:44px;white-space:normal}
.social-page .youtube-primary:hover,.social-page .youtube-primary:focus-visible {background:#8c3e2d;border-color:#8c3e2d}
.social-page .platform-icon {width:24px;height:24px;display:block;flex:none;color:inherit}
.social-page .showcase-heading .youtube-primary .platform-icon {width:22px;height:22px}
.social-page .showcase-videos {display:grid;grid-template-columns:1fr;gap:14px;width:100%}
.social-page .showcase-video {display:block;width:100%;max-width:min(320px,max(220px,calc((100svh - var(--site-header-height,86px) - 250px) * .5926)));justify-self:center;min-width:0;color:#fff3df;border-radius:14px;overflow:hidden;background:#252525;transition:background .15s}
.social-page .showcase-thumbnail {aspect-ratio:16/9;position:relative;overflow:hidden;background:#222}
.social-page .showcase-thumbnail>img {display:block;width:100%;height:100%;object-fit:cover}
.social-page .video-play {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#ff0000;--icon-cutout:#ffffff;pointer-events:none}
.social-page .video-play .platform-icon {width:48px;height:48px;filter:drop-shadow(0 1px 3px #0008)}
.social-page .showcase-video:hover .video-play {color:#d90000}
.social-page .video-caption {display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:10px;padding:6px 16px 6px 14px}
.social-page main .showcase-video h3 {font-size:17px;font-weight:700;line-height:1.3;letter-spacing:0;color:#fff3df;text-align:left;margin:0;padding:0}
.social-page .caption-youtube {display:flex;align-items:center;justify-content:center;color:#ff0000;--icon-cutout:#fff}
.social-page .caption-youtube .platform-icon {width:28px;height:28px}
.social-page .showcase-video:hover {background:#414141}
.social-page .showcase-video:hover h3 {text-decoration:underline;text-underline-offset:3px}
@media (min-width:741px) and (max-width:1200px) {
.social-page main .account-intro h2 {font-size:25px}
.social-page .sketch-avatar,.social-page .craft-avatar {width:100px;height:100px}
.social-page .sketch-avatar {width:120px;height:120px}
.social-page .account-intro {gap:14px;min-height:120px}
}
@media (max-width:740px) {
.social-page main .social-directory {grid-template-columns:1fr;grid-template-areas:"directory" "videos";gap:30px;min-height:0}
.social-page .showcase-videos {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.social-page .showcase-video {max-width:none}
.social-page .showcase-heading {flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
.social-page main .showcase-heading h2 {font-size:clamp(14px,3.5vw,20px);margin-inline:auto}
}
@media (max-width:600px) {
.social-page main .social-directory {padding:28px 0 38px}
.social-page main .social-introduction p {font-size:18px}
.social-page .account-directory {grid-template-columns:1fr;gap:20px}
.social-page .account-group {grid-template-columns:1fr;gap:14px}
.social-page .sketch-avatar,.social-page .craft-avatar {width:104px;height:104px}
.social-page .sketch-avatar {width:124px;height:124px}
.social-page .account-crafts {grid-column:auto}
.social-page .showcase-heading {flex-direction:column;align-items:flex-start}
.social-page .showcase-videos {grid-template-columns:1fr;gap:24px}
.social-page .video-showcase {padding:22px 18px;border-radius:20px}
}

/* One continuous family-to-crafts section, with flat, gently rotated photos. */
.social-page main>.social-next-section {
  width:100%;min-height:calc(100svh - var(--site-header-height,86px));
  border-top:1px solid #b7a080;padding:76px 24px 84px;
}
.social-page .family-crafts-story {
  display:grid;width:100%;max-width:1120px;margin-inline:auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"family-photo family-copy" "crafts-copy crafts-photo";
  column-gap:clamp(40px,6vw,96px);row-gap:28px;align-items:center;
}
.social-page .story-snapshot {
  width:100%;margin:0;padding:7px;background:var(--charcoal);
  border-radius:23px;box-shadow:0 12px 25px #49332429;
}
.social-page .story-snapshot img {
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:17px;
}
.social-page .family-snapshot {grid-area:family-photo;transform:rotate(-2deg);width:94%;justify-self:start}
.social-page .crafts-snapshot {grid-area:crafts-photo;transform:rotate(2deg);width:94%;justify-self:end;margin-top:-24px}
.social-page .family-snapshot img {object-position:center 60%}
.social-page .crafts-snapshot img {object-position:center 50%}
.social-page .snapshot-window {display:block;overflow:hidden;border-radius:17px}
.social-page .crafts-snapshot .snapshot-window img {transform:scale(1.11)}
.social-page .story-invitation {container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.social-page .family-invitation {grid-area:family-copy;padding:8px 0 24px}
.social-page .crafts-invitation {grid-area:crafts-copy;padding:20px 0 8px 24px}
.social-page main .story-invitation h2 {
  font-family:var(--heading);font-size:clamp(17px,6cqi,32px);line-height:1.2;white-space:nowrap;
  color:var(--brick);letter-spacing:-.6px;margin:0 0 18px;
}
.social-page main .story-invitation p {font-size:20px;line-height:1.6;max-width:43ch;margin:0 0 14px}
.social-page .story-invitation>.button {align-self:flex-start;width:auto;max-width:100%;margin:0}
.social-page .story-invitation .story-primary {background:var(--brick);border-color:var(--brick);color:#fff3df}
.social-page .story-invitation .story-primary:hover {background:#8c3e2d;border-color:#8c3e2d}
@media(max-width:900px) and (min-width:741px) {
  .social-page .family-crafts-story {column-gap:38px;row-gap:36px}
  .social-page main .story-invitation p {font-size:18px}
  .social-page .crafts-invitation {padding-left:0}
}
@media(max-width:740px) {
  .social-page main>.social-next-section {min-height:0;padding:46px 10px 54px}
  .social-page .family-crafts-story {
    max-width:540px;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"family-photo" "family-copy" "crafts-photo" "crafts-copy";
    gap:30px;
  }
  .social-page .story-snapshot {width:94%;max-width:440px}
  .social-page .family-snapshot {transform:rotate(-1.5deg)}
  .social-page .crafts-snapshot {transform:rotate(1.5deg);margin-top:18px}
  .social-page .family-invitation,.social-page .crafts-invitation {padding:0}
  .social-page main .story-invitation h2 {font-size:clamp(17px,6cqi,32px);letter-spacing:-.4px}
  .social-page main .story-invitation p {font-size:20px}
}

/* Family story action follows the right edge of its text block. */
.social-page .family-invitation>.button {align-self:flex-start}

/* More breathing room between videos and the account directory. */
@media(min-width:741px) {
 .social-page main .social-directory {column-gap:clamp(80px,7.4vw,132px);max-width:1412px;margin-inline:auto}
}
