/* Selected Rhubarb + Oat design. Canonical pages use this layer only. */
/* Selected colour tokens. Edit this block for site-wide colour changes. */
body,
#disha-warm {
  --paper: #f9f6f0; --ink: #342d33; --muted: #665e63; --clay: #943d56;
  --hand-ink: #943d56; --hand-line: #68744b;
  --stage: #e9dfda; --panel: #f2e7e5; --ribbon: #ece3df;
  --paper-grid: #674f5b14; --portrait-frame: #f4ece9;
  --portrait-frame-line: #ad969c; --portrait-shadow: #d9cacc;
  --ribbon-bg: #493944; --ribbon-text: #fbf8f2;
  --ribbon-marker: #d4b8ac; --contact-paper: #fcfaf6; --paper-rule: #d9ccc8;
  --human-wash: rgba(168, 72, 99, .12); --human-wash-soft: rgba(168, 72, 99, .04);
}

/* Paper material and framing. */

#disha-warm .dw-hero {
  position: relative;
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -20px -20px;
}
#disha-warm .dw-photo {
  border: 5px solid var(--portrait-frame);
  box-shadow: 0 0 0 1px var(--portrait-frame-line), 12px 12px 0 var(--portrait-shadow);
}
#disha-warm .dw-ribbon { background: var(--ribbon-bg); color: var(--ribbon-text); }
#disha-warm .dw-marquee-group span::before { background: var(--ribbon-marker); }
#disha-warm .dw-writing { background: transparent; }
#disha-warm .dw-contact {
  position: relative;
  isolation: isolate;
  padding-block: 112px 124px;
}
#disha-warm .dw-contact::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: -110px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--contact-paper);
  background-image: url('paper-fiber.svg');
  pointer-events: none;
}
#disha-warm .dw-torn-transition {
  display: block;
  position: absolute;
  z-index: 1;
  top: clamp(-150px, -8.5vw, -80px);
  left: 50%;
  width: max(100vw, 900px);
  height: max(40vw, 360px);
  transform: translateX(-50%);
  background: url('torn-paper-top.png') center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  pointer-events: none;
}
#disha-warm .dw-contact > :not(.dw-torn-transition) { position: relative; z-index: 2; }
#disha-warm .dw-contact::before { z-index: 3; top: 40px; }
#disha-warm .c-footer { position: relative; z-index: 1; }
#disha-warm .c-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--contact-paper);
  background-image: url('paper-fiber.svg');
  pointer-events: none;
}
#disha-warm .dw-stage { border: 1px solid var(--paper-rule); }
body .c-case-brief .ov,
body .c-case-brief .ov-col { border-color: var(--paper-rule); }
body .cs-hero,
body .blog-header {
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 64px 64px;
}


/* Handwritten labels and link-triggered ink marks. */

body .hand {
  color: var(--hand-ink);
  font: 500 27px/1.05 'Caveat', cursive;
  letter-spacing: 0;
  text-transform: none;
}
body .page-hand {
  display: inline-block;
  margin-bottom: 18px;
  transform: rotate(-2deg);
  transform-origin: left center;
}
body .block-title .block-hand {
  color: var(--hand-ink);
  font: 500 32px/1 'Caveat', cursive;
}
body .photo-caption,
body .contact-foot { font-size: 27px; transform: rotate(-2deg); }
#disha-warm .dw-hello {
  color: var(--hand-ink);
  font: 500 clamp(28px, 3vw, 33px)/1.05 'Caveat', cursive;
  transform: rotate(-2deg);
  transform-origin: left center;
  margin-bottom: 18px;
}
#disha-warm .dw-work .dw-eyebrow {
  color: var(--hand-ink);
  font: 500 28px/1 'Caveat', cursive;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-2deg);
  transform-origin: left center;
}
#disha-warm .dw-contact .human-signoff {
  color: var(--hand-ink);
  font: 500 31px/1 'Caveat', cursive;
  letter-spacing: 0;
  margin-top: 26px;
  transform: rotate(-3deg);
  transform-origin: left center;
}


#disha-warm .dw-writing .dw-section-head::before {
  background: radial-gradient(ellipse at 42% 49%, var(--human-wash) 0%, var(--human-wash-soft) 47%, transparent 76%);
}
body.page-work .entry-cover.c-work-cover { background: var(--stage); }
/* Homepage paper and colour refinements. */
#disha-warm .dw-hero {
  isolation: isolate;
  background-image: none;
}
#disha-warm .dw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -20px -20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 36px, #000 24%, rgba(0, 0, 0, .48) 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 36px, #000 24%, rgba(0, 0, 0, .48) 65%, transparent 100%);
  pointer-events: none;
}
#disha-warm .dw-writing {
  background-image: none;
}
#disha-warm .dw-writing .dw-section-head {
  isolation: isolate;
}
#disha-warm .dw-writing .dw-section-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60px;
  left: -12px;
  width: min(720px, calc(100vw - 24px));
  height: 240px;
  background: radial-gradient(ellipse at 42% 49%, rgba(199, 95, 113, .13) 0%, rgba(199, 95, 113, .055) 47%, transparent 76%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 78%, transparent 100%);
  pointer-events: none;
}
#disha-warm .dw-banner-space {
  padding-block: 13px;
  margin-bottom: calc(90px * var(--space-factor));
}
#disha-warm .dw-ribbon {
  width: calc(100% + 36px);
  margin-left: -18px;
  transform: rotate(-1.1deg);
  transform-origin: center;
}
#disha-warm .dw-mug { right: -13%; top: -6%; }
#disha-warm .dw-scuba { left: -12%; }
#disha-warm .dw-notebook { right: -18%; }
#disha-warm .dw-writing .dw-section-head { padding-right: 0; }
#disha-warm .dw-writing-notebook {
  left: -91px;
  right: auto;
  top: 13px;
}
#disha-warm .dw-contact::before {
  left: -132px;
  right: auto;
  top: 110px;
}
#disha-warm .dw-section-head .dw-section-link {
  flex: 0 0 auto;
  margin: 0 0 5px;
  text-align: left;
}
body {
  background-image: url('paper-fiber.svg');
  background-size: 256px 256px;
}
body :is(.page-hero, .cs-hero, .blog-header) {
  position: relative;
  isolation: isolate;
  background-image: none;
}
body :is(.page-hero, .cs-hero, .blog-header)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -20px -20px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 100%);
  mask-image: linear-gradient(to bottom, #000, transparent 100%);
  pointer-events: none;
}
body .c-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color .2s ease;
}
body :is(.c-link:hover, .c-link:focus-visible, .entry:hover .c-link) { color: var(--clay); }
body .entry-trail { text-decoration: none; }
body .entry-trail-label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
@media (max-width: 1100px) {
  #disha-warm .dw-writing-notebook { left: -73px; width: 60px; }
  #disha-warm .dw-contact::before { left: -88px; width: 76px; }
}
@media (max-width: 620px) {
  #disha-warm .dw-banner-space { margin-bottom: 72px; }
  #disha-warm .dw-section-head .dw-section-link { margin: 0; }
  #disha-warm .dw-writing { padding-top: 78px; }
  #disha-warm .dw-writing-notebook { left: 0; top: -62px; width: 52px; }
  #disha-warm .dw-contact::before { left: 0; top: 14px; width: 64px; }
}
#disha-warm .dw-eyebrow,
body :is(.page-hand, .cs-meta, .post-series) {
  color: var(--clay);
}
/* Text actions leave the horizontal arrow unmarked. */
#disha-warm :is(.dw-link, .dw-project-action) {
  min-height: 34px;
  padding: 0;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
  transition: color .2s ease;
}
#disha-warm .dw-project-action {
  font-size: 15px;
}
#disha-warm .dw-action-label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
#disha-warm :is(.dw-link, .dw-project-action) i {
  display: inline-block;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
  transform: none;
}
#disha-warm .dw-link:is(:hover, :focus-visible),
#disha-warm a:is(:hover, :focus-visible) .dw-project-action {
  color: var(--clay);
}
#disha-warm :is(.dw-link:hover, .dw-link:focus-visible) i,
#disha-warm a:is(:hover, :focus-visible) .dw-project-action i {
  transform: translateX(3px);
}
@media (max-width: 740px) {
  #disha-warm .dw-contact { padding-block: 112px 108px; }
  #disha-warm .dw-contact::before { top: 18px; }
}
/* In the selected human-details design, ink appears only when a link is used. */
#disha-warm .dw-action-label,
body .c-link,
body .entry-trail-label,
body.page-blog .entry:is(:hover, :focus-visible) .entry-title {
  text-decoration: none;
}
 :is(.dw-action-label, .dw-article h3, .c-nav a, .c-socials a, .site-name, .dw-name, .entry-trail-label, .series-list .entry-title span, .channel-label, .human-link-label, .next-all, .next-card-title, .blog-prose a, .content-area a) {
  position: relative;
}
 :is(.series-list .entry-title span, .next-card-title) { display: inline-block; width: fit-content; max-width: 100%; }
 :is(.dw-action-label, .dw-article h3, .c-nav a, .c-socials a, .site-name, .dw-name, .entry-trail-label, .series-list .entry-title span, .channel-label, .human-link-label, .next-all, .next-card-title, .blog-prose a, .content-area a)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 10px;
  background: var(--hand-line);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTYiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0yIDEwIEMxOCA1IDI4IDExIDQyIDggUzY2IDYgODAgOSBTMTAzIDUgMTE5IDggUzE0MyAxMSAxNTggNyBTMTgzIDEwIDE5OCA3IFMyMjIgOSAyMzggNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTYiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0yIDEwIEMxOCA1IDI4IDExIDQyIDggUzY2IDYgODAgOSBTMTAzIDUgMTE5IDggUzE0MyAxMSAxNTggNyBTMTgzIDEwIDE5OCA3IFMyMjIgOSAyMzggNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==") center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
 a:is(:hover, :focus-visible) :is(.dw-action-label, .dw-article h3, .entry-trail-label, .series-list .entry-title span, .channel-label, .human-link-label, .next-card-title)::after,
 :is(.c-nav a, .c-socials a, .site-name, .dw-name, .next-all, .blog-prose a, .content-area a):is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
   :is(.dw-action-label, .dw-article h3, .c-nav a, .c-socials a, .site-name, .dw-name, .entry-trail-label, .series-list .entry-title span, .channel-label, .human-link-label, .next-all, .next-card-title, .blog-prose a, .content-area a)::after {
    transition: none;
  }
}

/* Shared rightward motion and the approved touch cue. */
#disha-warm a:is(:hover,:focus-visible) .dw-arrow,#disha-warm .dw-link:is(:hover,:focus-visible) i,#disha-warm a:is(:hover,:focus-visible) .dw-project-action i{transform:translateX(3px)}
@media(hover:none){body.page-blog .series-list .entry-title,body.page-blog .bay-main>.entry .entry-title{color:var(--clay);font-weight:600}}

/* A full-width paper header lifts cleanly above the page on scroll. */
.site-header.c-header,
#disha-warm .dw-header.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  box-shadow: none;
  transition: box-shadow .25s ease;
}
.site-header .c-header-inner,
#disha-warm .dw-header .c-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(900px, calc(100% - 80px));
  margin-inline: auto;
  padding-block: 20px;
}
.site-header.c-header.is-scrolled,
#disha-warm .dw-header.c-header.is-scrolled {
  box-shadow: 0 5px 12px rgba(52, 45, 51, .12), 0 15px 26px rgba(52, 45, 51, .09);
}
.site-header .c-brand,
#disha-warm .dw-header .c-brand {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.site-header .c-nav,
#disha-warm .dw-header .c-nav {
  font-size: 15px;
  line-height: 1.4;
  gap: 24px;
}
#disha-warm :is(#dw-home, #dw-work, #dw-writing, #dw-contact) { scroll-margin-top: 100px; }

/* The signoff uses the same rhubarb as the contact label. */
#disha-warm .dw-contact p.human-signoff:not(.dw-eyebrow) { color: var(--clay); }

/* A small image movement makes the linked work feel interactive. */
#disha-warm .dw-project:is(:hover, :focus-within) .dw-stage img,
.page-work .work-list .entry:is(:hover, :focus-visible) .entry-cover img {
  transform: scale(1.025);
}
.page-work .work-list .entry .entry-cover img {
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 900px) {
  #disha-warm .dw-header .c-header-inner { width: calc(100% - 64px); }
}
@media (max-width: 740px) {
  .site-header .c-header-inner,
  #disha-warm .dw-header .c-header-inner {
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: flex-start;
    padding-block: 13px;
    gap: 8px;
  }
  .site-header .c-brand,
  #disha-warm .dw-header .c-brand { font-size: 18px; }
  .site-header .c-nav,
  #disha-warm .dw-header .c-nav { gap: 0 18px; }
  #disha-warm :is(#dw-home, #dw-work, #dw-writing, #dw-contact) { scroll-margin-top: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.c-header,
  #disha-warm .dw-header.c-header { transition: none; }
  #disha-warm .dw-project:is(:hover, :focus-within) .dw-stage img,
  .page-work .work-list .entry:is(:hover, :focus-visible) .entry-cover img { transform: none; }
}
