/* CHILDREN v13
   Clean illustrated magazine layout for Raagini + Dev.
   No patch overrides. All page-specific rules live here. */

.children-page{
  --paper:#fff9ed;
  --ink:#17342e;
  --muted:#68766f;
  --raagini-paper:#ffe8df;
  --raagini-paper-2:#fff3ec;
  --raagini-accent:#a92f3d;
  --dev-paper:#e3f5ef;
  --dev-paper-2:#f1faf6;
  --dev-accent:#2f7060;
  --gold:#efad47;
  --deep-red:#8a2f25;
  background:var(--paper);
  color:var(--ink);
}

/* Hero */
.children-hero{
  position:relative;
  height:400px;
  min-height:400px;
  display:grid;
  grid-template-columns:44% 56%;
  overflow:hidden;
  background:#0b2d28;
  color:#fff;
}
.children-hero-copy{
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 2vw 0 5vw;
}
.children-hero-copy h1{
  margin:0 0 18px;
  color:#fff;
  font:400 clamp(4rem,6vw,6.2rem)/.9 Georgia,serif;
  letter-spacing:-.055em;
}
.children-hero-copy p{
  margin:0;
  color:var(--gold);
  font:700 clamp(1.05rem,1.42vw,1.36rem)/1.35 Georgia,serif;
}
.children-hero-art{
  height:400px;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
.children-hero-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

/* Intro: illustrations bleed to the top and outer edges, with no cards or borders. */
.children-intro{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(560px,830px) minmax(190px,1fr);
  align-items:stretch;
  min-height:205px;
  overflow:hidden;
  background:#fff3d6;
}
.children-intro-art{
  position:relative;
  min-height:205px;
  margin:0;
  overflow:hidden;
}
.children-intro-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.intro-art-left img{object-position:right center}
.intro-art-left::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 70%,#fff3d6 100%);
}
.intro-art-right img{object-position:left center}
.intro-art-right figcaption{
  position:absolute;
  z-index:2;
  top:11%;
  left:22%;
  margin:0;
  color:#2d554a;
  font:italic 700 clamp(1rem,1.25vw,1.3rem)/1 Georgia,serif;
  letter-spacing:.01em;
  transform:rotate(-3deg);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.intro-art-right::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#fff3d6 0%,transparent 18%);
}

.children-intro-copy{
  align-self:center;
  padding:24px 28px 24px 30px;
  border-left:3px solid #cd784c;
}
.children-intro-copy p{
  margin:0 0 10px;
  color:#334a44;
  font:400 .98rem/1.55 Georgia,serif;
}
.children-intro-copy p:last-child{margin-bottom:0}
.children-intro-copy strong{color:#15352e;font-weight:700}

/* Magazine body. Rows share a common grid, so illustrations and copy line up across both stories. */
.children-magazine{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:1500px;
  margin:0 auto;
  background:#fffdf8;
  box-shadow:inset 0 0 0 1px rgba(24,54,47,.04);
}
.children-magazine > *{
  min-width:0;
  padding-left:clamp(26px,3.2vw,48px);
  padding-right:clamp(26px,3.2vw,48px);
}
.children-magazine > *:nth-child(odd){background:linear-gradient(90deg,var(--raagini-paper) 0%,var(--raagini-paper-2) 100%)}
.children-magazine > *:nth-child(even){background:linear-gradient(90deg,var(--dev-paper) 0%,var(--dev-paper-2) 100%)}

.story-column-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:20px;
  align-items:center;
  padding-top:34px;
  padding-bottom:22px;
}
.story-heading-copy{min-width:0}
.child-name{
  font:700 .76rem/1 Arial,sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.story-column-heading-raagini .child-name{color:#b85236}
.story-column-heading-dev .child-name{color:#4c7d6c}
.child-meta{
  margin-top:8px;
  color:#697972;
  font:400 .76rem/1.3 Georgia,serif;
}
.story-column-heading h2{
  margin:10px 0 8px;
  color:#16362f;
  font:400 clamp(2rem,2.7vw,2.85rem)/.98 Georgia,serif;
  letter-spacing:-.04em;
}
.story-column-heading p{
  margin:0;
  color:#727c76;
  font:italic .9rem/1.4 Georgia,serif;
}
.story-heading-copy::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top:17px;
  border-radius:99px;
}
.story-column-heading-raagini .story-heading-copy::after{background:#df704a}
.story-column-heading-dev .story-heading-copy::after{background:#4a8e7b}
.story-heading-art{
  width:205px;
  max-height:165px;
  display:block;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:saturate(1.15) contrast(1.02);
}

.story-cell{
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding-top:22px;
  padding-bottom:22px;
  border-top:1px solid rgba(45,72,63,.08);
}
.story-cell-illustrated .story-art{
  flex:0 0 clamp(155px,14vw,205px);
  width:clamp(155px,14vw,205px);
  max-height:175px;
  display:block;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:saturate(1.18) contrast(1.03);
}
.story-cell-bhais .story-art-family{
  max-height:200px;
}
.story-copy{min-width:0;flex:1}
.story-copy h3{
  margin:0 0 8px;
  color:#17372f;
  font:700 1.15rem/1.18 Georgia,serif;
  letter-spacing:-.01em;
}
.story-cell-raagini .story-copy h3{color:#8f2e3a}
.story-cell-dev .story-copy h3{color:#173f36}
.story-copy p{
  margin:0 0 9px;
  color:#40534d;
  font:400 .92rem/1.52 Georgia,serif;
}
.story-copy p:last-child{margin-bottom:0}
.story-copy strong{color:#16372f;font-weight:700}
.story-pull{
  margin:13px 0 2px!important;
  padding:2px 0 2px 14px;
  border-left:3px solid #d27049;
  color:#1d3932!important;
  font-style:italic!important;
}
.story-cell-dev .story-pull{border-left-color:#4d8d7c}
.story-art-soft{
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 54%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.6) 74%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 54%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.6) 74%,transparent 100%);
}
.story-art-crop-right{
  object-fit:cover!important;
  object-position:72% center!important;
}
.story-art-crop-center{
  object-fit:cover!important;
  object-position:center center!important;
}
.story-cell-text-only .story-copy,
.story-cell-reflection .story-copy,
.story-cell-reunion .story-copy,
.story-cell-little-dev .story-copy{max-width:100%}

/* Paired story epilogues. Raagini ends with her road illustration and links; Dev ends with the little-Dev collage. */
.raagini-epilogue-column{
  padding-top:20px;
  padding-bottom:22px;
  border-top:1px solid rgba(143,46,58,.08);
}
.raagini-road-epilogue,
.dev-little-epilogue{
  position:relative;
  margin:0;
  overflow:hidden;
  border:0;
  background:transparent;
}
.raagini-road-epilogue img,
.dev-little-epilogue img{
  width:100%;
  height:auto;
  display:block;
  border:0;
  box-shadow:none;
}
.raagini-road-epilogue img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 94%,transparent 100%);
}
.raagini-links{
  margin-top:16px;
}
.raagini-links-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:0;
  padding:13px 14px 10px;
  border-radius:13px 13px 0 0;
  background:rgba(255,205,192,.62);
}
.raagini-links-head > span{
  color:#a82f3e;
  font:700 .72rem/1 Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.raagini-links-head i{
  color:#be4d4f;
  font:italic 700 .8rem/1.05 Georgia,serif;
  transform:rotate(-4deg);
}
.raagini-links-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px 14px 14px;
  border-radius:0 0 13px 13px;
  background:rgba(255,205,192,.62);
}
.raagini-links a{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:10px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.68);
  color:#8c2534;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease;
}
.raagini-links a:hover{transform:translateY(-1px);background:#fff}
.raagini-links a > span:not(.link-icon){display:flex;min-width:0;flex-direction:column;gap:3px;font:400 .86rem/1.2 Georgia,serif}
.raagini-links small{color:#775f57;font:700 .56rem/1 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.raagini-links b{font:400 .95rem/1 Arial,sans-serif}
.link-icon{color:#b82e47;font:700 1.15rem/1 Arial,sans-serif}
.story-cell-little-dev{
  display:block;
}
.story-cell-little-dev .story-copy{max-width:100%}
.dev-little-epilogue{
  position:relative;
  margin:18px 0 0;
}
.dev-little-epilogue img{
  width:100%;
  max-width:none;
  margin:0;
}

/* Personal notes: aligned in one row, outside the red closing band. */
.children-personal-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:1500px;
  margin:0 auto;
}
.children-personal-note{
  min-width:0;
  padding:30px clamp(26px,3.2vw,48px) 32px;
}
.children-personal-note-raagini{
  background:linear-gradient(90deg,var(--raagini-paper) 0%,var(--raagini-paper-2) 100%);
}
.children-personal-note-dev{
  background:linear-gradient(90deg,var(--dev-paper) 0%,var(--dev-paper-2) 100%);
}
.children-personal-label{
  margin-bottom:10px;
  font:700 .8rem/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.children-personal-note-raagini .children-personal-label{color:var(--raagini-accent)}
.children-personal-note-dev .children-personal-label{color:var(--dev-accent)}
.children-personal-note p{
  margin:0;
  color:#213c35;
  font:400 1rem/1.55 Georgia,serif;
}
.children-personal-note strong{color:#17352f;font-weight:700}

/* Shared close only. */
.children-closing{
  padding:34px max(6vw,44px) 38px;
  background:var(--deep-red);
  color:#fff8eb;
}
.children-closing-copy{
  max-width:930px;
  margin:0 auto 20px;
  text-align:center;
  font:400 1rem/1.58 Georgia,serif;
}
.children-closing-copy p{margin:0 0 8px;color:#fff8eb}
.children-closing-final{
  margin:0;
  color:#fff;
  font:400 clamp(1.5rem,2.2vw,2.2rem)/1.2 Georgia,serif;
  text-align:center;
}
.children-closing-final strong{font-weight:700}

@media (max-width:1100px){
  .children-intro{grid-template-columns:175px minmax(0,1fr) 175px}
  .story-column-heading{grid-template-columns:minmax(0,1fr) 160px}
  .story-heading-art{width:160px}
  .story-cell{gap:16px}
  .story-cell-illustrated .story-art{flex-basis:150px;width:150px}
}

@media (max-width:840px){
  .children-hero{height:auto;min-height:0;grid-template-columns:1fr}
  .children-hero-copy{padding:120px 7vw 28px}
  .children-hero-copy h1{font-size:clamp(3.2rem,13vw,5rem)}
  .children-hero-art{height:280px}
  .children-intro{grid-template-columns:1fr;min-height:0}
  .children-intro-art{height:170px;min-height:0}
  .intro-art-left::after{background:linear-gradient(180deg,transparent 70%,#fff3d6 100%)}
  .intro-art-right{min-height:190px}
  .intro-art-right figcaption{top:10%;left:12%;font-size:1.05rem}
  .children-intro-copy{order:2;margin:0 6vw;padding:24px 0;border-left:0;border-top:3px solid #cd784c}
  .intro-art-left{order:1}.intro-art-right{order:3}
  .children-magazine{grid-template-columns:1fr}
  .children-magazine > *:nth-child(odd),
  .children-magazine > *:nth-child(even){background:var(--raagini-paper-2)}
  .story-column-heading-dev,
  .story-cell-dev,
  .story-cell-little-dev{background:var(--dev-paper-2)!important}
  .story-column-heading{grid-template-columns:minmax(0,1fr) 150px}
  .story-heading-art{width:150px}
  .children-personal-row{grid-template-columns:1fr}
  .children-personal-note{padding-left:7vw;padding-right:7vw}
  .children-closing{padding-left:7vw;padding-right:7vw}
}

@media (max-width:560px){
  .children-magazine > *{padding-left:22px;padding-right:22px}
  .story-column-heading{grid-template-columns:1fr;gap:14px}
  .story-heading-art{width:175px;justify-self:start}
  .story-cell{display:block}
  .story-cell-illustrated .story-art{width:180px;max-height:155px;margin:0 0 12px}
  .raagini-links-grid{grid-template-columns:1fr}
  .raagini-links-head i{display:none}
}