/* CHILDREN v318
   Clean editorial layout for Raagini + Dev.
   Built directly from v313 content with no copy changes.
   One ivory canvas, two deep-green story columns, one gold accent system. */

.children-page{
  --ivory:#f5efe2;
  --ivory-card:#fbf7ef;
  --ink:#17342e;
  --muted:#6b746e;
  --green:#0c3a32;
  --green-2:#10483d;
  --gold:#d8a747;
  --gold-soft:#efd69a;
  --white:#fffdf8;
  background:var(--ivory);
  color:var(--ink);
}

/* Hero stays unchanged in structure and scale. */
.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 bridge: equal air above/below, rounded, art anchored at the far edges. */
.children-intro{
  width:min(94vw,1560px);
  min-height:220px;
  margin:28px auto;
  display:grid;
  grid-template-columns:minmax(220px,27%) minmax(500px,46%) minmax(220px,27%);
  align-items:stretch;
  overflow:hidden;
  border-radius:20px;
  background:var(--ivory-card);
  box-shadow:0 12px 32px rgba(34,49,42,.07);
}
.children-intro-art{
  position:relative;
  min-height:220px;
  margin:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.children-intro-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.intro-art-left{justify-content:flex-start}
.intro-art-left img{object-position:left center}
.intro-art-right{justify-content:flex-end}
.intro-art-right img{object-position:right center}
.intro-art-right figcaption{display:none}
.children-intro-copy{
  align-self:center;
  padding:26px 34px;
  border-left:2px solid var(--gold);
}
.children-intro-copy p{
  margin:0 0 11px;
  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}

/* Two continuous story panels on the ivory canvas. */
.children-magazine{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:22px;
  width:min(94vw,1560px);
  margin:0 auto;
  padding:0;
  background:transparent;
}
.children-magazine::before,
.children-magazine::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  width:calc(50% - 11px);
  border-radius:20px;
  background:linear-gradient(180deg,var(--green-2) 0%,var(--green) 100%);
  box-shadow:0 14px 34px rgba(12,58,50,.11);
}
.children-magazine::before{left:0}
.children-magazine::after{right:0}
.children-magazine > *{
  min-width:0;
  padding-left:clamp(30px,3vw,52px);
  padding-right:clamp(30px,3vw,52px);
  color:var(--white);
  background:transparent!important;
}

.story-column-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:22px;
  align-items:center;
  padding-top:34px;
  padding-bottom:24px;
}
.story-heading-copy{min-width:0}
.child-name{
  color:var(--gold)!important;
  font:700 .76rem/1 Arial,sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.child-meta{margin-top:8px;color:#c9d6d0;font:400 .76rem/1.3 Georgia,serif}
.story-column-heading h2{
  margin:10px 0 8px;
  color:#fff;
  font:400 clamp(2rem,2.7vw,2.85rem)/.98 Georgia,serif;
  letter-spacing:-.04em;
}
.story-column-heading p{margin:0;color:#c8d5cf;font:italic .9rem/1.4 Georgia,serif}
.story-heading-copy::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top:17px;
  border-radius:99px;
  background:var(--gold)!important;
}
.story-heading-art{
  width:190px;
  max-height:160px;
  display:block;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.story-cell{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding-top:24px;
  padding-bottom:24px;
  border-top:1px solid rgba(255,255,255,.11);
}
.story-cell-illustrated .story-art{
  flex:0 0 clamp(140px,11vw,185px);
  width:clamp(140px,11vw,185px);
  max-height:175px;
  display:block;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.story-cell-bhais .story-art-family{max-height:190px}
.story-copy{min-width:0;flex:1}
.story-copy h3{
  margin:0 0 9px;
  color:var(--gold)!important;
  font:700 1.15rem/1.18 Georgia,serif;
  letter-spacing:-.01em;
}
.story-copy p{margin:0 0 10px;color:#f1f3ee;font:400 .92rem/1.55 Georgia,serif}
.story-copy p:last-child{margin-bottom:0}
.story-copy strong{color:#fff;font-weight:700}
.story-pull{
  margin:14px 0 2px!important;
  padding:2px 0 2px 14px;
  border-left:3px solid var(--gold)!important;
  color:#fff!important;
  font-style:italic!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%}

/* Epilogues stay complete, but now belong visually to their respective green columns. */
.raagini-epilogue-column{
  padding-top:24px;
  padding-bottom:24px;
  border-top:1px solid rgba(255,255,255,.11);
}
.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{max-width:560px;margin:0 auto}
.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,255,255,.075);
}
.raagini-links-head > span{color:var(--gold);font:700 .72rem/1 Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.raagini-links-head i{color:var(--gold-soft);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,255,255,.075)}
.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,.085);color:#fff;text-decoration:none;
  transition:transform .18s ease,background .18s ease;
}
.raagini-links a:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.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:#c8d5cf;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:var(--gold);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{margin:18px auto 0;max-width:560px}

/* Personal notes are the final row of the two story panels, not a separate colored band. */
.children-personal-note{
  align-self:stretch;
  margin-top:0;
  padding-top:26px!important;
  padding-bottom:32px!important;
  border-top:1px solid rgba(255,255,255,.11);
}
.children-personal-label{
  margin-bottom:10px;
  color:var(--gold)!important;
  font:700 .8rem/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.children-personal-note p{margin:0;color:#f6f2e8;font:400 1rem/1.55 Georgia,serif}
.children-personal-note strong{color:#fff;font-weight:700}

/* Shared close: breadth aligned, rounded, and deliberately floating above page bottom. */
.children-closing{
  width:min(94vw,1560px);
  margin:28px auto 38px;
  padding:34px max(6vw,44px) 38px;
  border:1px solid rgba(216,167,71,.55);
  border-radius:20px;
  background:var(--ivory-card);
  color:var(--ink);
  box-shadow:0 10px 28px rgba(34,49,42,.05);
}
.children-closing-copy{max-width:980px;margin:0 auto 18px;text-align:center;font:400 1rem/1.58 Georgia,serif}
.children-closing-copy p{margin:0 0 8px;color:#334a44}
.children-closing-copy strong{color:#17342e}
.children-closing-final{margin:0;color:#9b6c22;font:400 clamp(1.5rem,2.2vw,2.2rem)/1.2 Georgia,serif;text-align:center}
.children-closing-final::before{content:"";display:block;width:56px;height:2px;margin:0 auto 18px;border-radius:99px;background:var(--gold)}
.children-closing-final strong{font-weight:700}

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

@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{width:90vw;grid-template-columns:1fr;min-height:0;margin:22px auto}
  .children-intro-art{height:175px;min-height:0}
  .children-intro-copy{order:2;margin:0 6vw;padding:22px 0;border-left:0;border-top:2px solid var(--gold)}
  .intro-art-left{order:1}.intro-art-right{order:3}
  .children-magazine{width:90vw;grid-template-columns:1fr;row-gap:0}
  .children-magazine::before,.children-magazine::after{display:none}
  .children-magazine > *{background:linear-gradient(180deg,var(--green-2) 0%,var(--green) 100%)!important}
  .children-magazine > *:first-child{border-radius:18px 18px 0 0}
  .children-magazine > *:last-child{border-radius:0 0 18px 18px}
  .story-column-heading{grid-template-columns:minmax(0,1fr) 150px}
  .story-heading-art{width:150px}
  .children-closing{width:90vw;padding-left:7vw;padding-right:7vw;margin-bottom:30px}
}

@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:170px;max-height:150px;margin:0 0 12px}
  .raagini-links-grid{grid-template-columns:1fr}
  .raagini-links-head i{display:none}
}

/* v319 artwork refresh: artwork assets carry their own feathering/transparency; no CSS masks/fades. */
.children-page .story-art,
.children-page .story-heading-art,
.children-page .raagini-road-epilogue img,
.children-page .dev-little-epilogue img{
  object-fit:contain;
  object-position:center;
}
.children-page .story-cell-bhais .story-art-family{
  width:min(46%,300px);
  max-height:220px;
  object-fit:contain;
  object-position:center;
}
.children-page .dev-little-epilogue img{
  width:100%;
  height:auto;
  max-height:280px;
}