/* WRITING v2 — isolated Writing system. No Home/Travel/Learning rules. */
.writing-page{margin:0;background:#f5f0e6;color:#172a27}.writing-page *{box-sizing:border-box}
.writing-header{
  position:relative;
  z-index:20;
  height:72px;
  padding:0 4.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#0c2a26;
  color:#fff;
}
.writing-header .brand{color:#fff;text-decoration:none;font:700 15px/1 Georgia,serif;letter-spacing:.12em}
.writing-header nav{display:flex;gap:28px}.writing-header nav a{color:rgba(255,255,255,.8);text-decoration:none;text-transform:uppercase;font:700 10px/1 Arial,sans-serif;letter-spacing:.08em}
.writing-header nav a.active,.writing-header nav a:hover{color:#e5a65a}
.writing-overline{color:#b76b42;font:800 10px/1.1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}

/* HERO — fixed 400px desktop canvas. Artwork is positioned independently and cannot size the hero. */
.writing-hero{
  position:relative;
  height:400px;
  min-height:400px;
  overflow:hidden;
  padding:30px 7vw;
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  background:
    radial-gradient(circle at 72% 34%,rgba(239,193,95,.11),transparent 24%),
    linear-gradient(112deg,#0a2925 0%,#0b302a 53%,#153a32 100%);
  color:#fff;
}
.writing-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#efc15f 45%,transparent);
  opacity:.48;
}
.writing-hero-copy{
  position:relative;
  z-index:2;
  max-width:700px;

  /* Learning has an eyebrow above its title.
     Writing intentionally does not. This offset keeps the Writing title
     on the same visual baseline without adding hidden text/layers. */
  transform:translateY(11px);
}
.writing-hero h1{
  margin:12px 0 10px;
  font:400 clamp(4rem,6vw,6.2rem)/.86 Georgia,serif;
  letter-spacing:-.055em;
}
.writing-hero-copy p{
  margin:0;
  max-width:760px;
  color:rgba(255,255,255,.74);
  font:400 clamp(1.05rem,1.45vw,1.35rem)/1.45 Georgia,serif;
}
.writing-hero-copy p span{
  display:block;
  white-space:nowrap;
}

/* Writing artwork lives inside the fixed hero canvas and never participates in hero sizing. */
.writing-mark{
  position:absolute;
  z-index:1;
  top:0;
  right:2.8vw;
  bottom:0;
  width:min(940px,50vw);
  isolation:isolate;
  pointer-events:none;
}
.writing-mark img{
  position:absolute;
  left:52%;
  top:50%;
  width:108%;
  max-width:none;
  height:auto;
  transform:translate(-50%,-50%);
  display:block;
  opacity:1;
  filter:brightness(1.34) saturate(1.10) contrast(1.02);

  /* Broader feathering keeps all four photograph edges soft against the hero. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,black 22%,black 78%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,black 26%,black 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,black 22%,black 78%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,black 26%,black 74%,transparent 100%);
  mask-composite:intersect;
}

/* FORM FILTER */
.writing-filter{min-height:58px;padding:0 7vw;display:flex;align-items:center;gap:10px;background:#e8dece;border-bottom:1px solid rgba(23,42,39,.12)}
.writing-filter button{padding:9px 14px;border:0;background:transparent;color:#4e5b56;cursor:pointer;text-transform:uppercase;font:800 11px/1 Arial,sans-serif;letter-spacing:.095em}
.writing-filter button.active{background:#172a27;color:#fff}

/* DYNAMIC SHELF */
.writing-shelf{padding:42px 7vw 48px;background:#f6f1e8}
.writing-shelf-head{display:block;margin-bottom:18px}
.writing-shelf h2{margin:6px 0 0;font:400 var(--type-section)/1.04 Georgia,serif}

.writing-shelf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.writing-card{min-height:104px;padding:13px 15px 12px;display:flex;flex-direction:column;text-decoration:none;color:#172a27;background:#efe4d0;border:1px solid rgba(23,42,39,.10);transition:transform .2s ease,box-shadow .2s ease}
.writing-card:nth-child(3n+2){background:#172a27;color:#fff}.writing-card:nth-child(3n){background:#dfe6dc}
.writing-card .card-type{color:#b76b42;text-transform:uppercase;font:800 9px/1 Arial,sans-serif;letter-spacing:.12em}
.writing-card h3{margin:10px 0 7px;font:400 clamp(1.08rem,1.35vw,1.5rem)/1.04 Georgia,serif}
.writing-card .card-meta{margin-top:auto;color:#a06e38;text-transform:uppercase;font:800 8px/1 Arial,sans-serif;letter-spacing:.10em}

.writing-shelf-more{
  display:flex;
  justify-content:center;
  margin-top:26px;
}
.writing-shelf-more button{
  padding:10px 18px;
  border:1px solid rgba(23,42,39,.22);
  background:transparent;
  color:#172a27;
  cursor:pointer;
  text-transform:uppercase;
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:.11em;
}
.writing-shelf-more button:hover{
  background:#172a27;
  color:#fff;
}

/* SELECTED WRITING: Raman's own curated shelf, distinct from the archive above. */
.writing-selected{padding:42px 7vw 48px;background:#e8dece}
.writing-selected-head{display:block;margin-bottom:18px}
.writing-selected h2{margin:6px 0 0;font:400 var(--type-section)/1.04 Georgia,serif}
.selected-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.selected-card{min-height:104px;padding:13px 15px 12px;display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#172a27;border-top:3px solid #b76b42;border-radius:0;transition:transform .2s ease,background .2s ease}
.selected-card:hover{
  transform:translateY(-3px);
  background:#1d3731;
}
.selected-card .context{color:#e5a65a;text-transform:uppercase;font:800 8px/1 Arial,sans-serif;letter-spacing:.12em}
.selected-card h3{margin:10px 0 7px;font:400 clamp(1.08rem,1.35vw,1.5rem)/1.04 Georgia,serif}
.selected-card .meta{margin-top:auto;padding-top:7px;color:#e5a65a;text-transform:uppercase;font:800 8px/1 Arial,sans-serif;letter-spacing:.09em}

[hidden]{display:none!important}
.piece{max-width:900px;margin:0 auto;padding:70px 40px 110px}.piece-back{display:inline-block;margin-bottom:55px;color:#b76b42;text-decoration:none;text-transform:uppercase;font:800 10px/1 Arial,sans-serif;letter-spacing:.12em}
.piece h1{margin:14px 0;font:400 clamp(3.5rem,6vw,6rem)/.92 Georgia,serif}.piece-deck{max-width:700px;color:#5d6863;font:400 20px/1.5 Georgia,serif}
.piece-rule{width:90px;height:3px;margin:38px 0;background:#b76b42}.piece-body{max-width:720px}.piece-body p{font:400 18px/1.75 Georgia,serif;color:#293c37}

@media(max-width:850px){
 .writing-header{height:64px;padding:0 22px}.writing-header nav{display:none}
 .writing-hero{height:auto;min-height:540px;padding:48px 24px 34px;display:block}.writing-hero-copy{transform:none}.writing-mark{position:relative;top:auto;right:auto;bottom:auto;width:min(78vw,350px);height:auto;aspect-ratio:1;margin:34px auto 0}
 .writing-filter{padding:14px 22px;flex-wrap:wrap}
 .writing-shelf,.writing-selected{padding:42px 22px}.writing-shelf-head,.writing-selected-head{display:block}
 .writing-shelf-grid,.selected-grid{display:block}.writing-card,.selected-card{margin-bottom:10px}
 .piece{padding:50px 22px 90px}
}
/* WRITING BEAUTIFICATION v236 — editorial refinement only. */
@media(min-width:851px){
  /* Quieter filter: reads like an index, not a toolbar. */
  .writing-filter{
    min-height:48px;
    padding:0 7vw;
    gap:24px;
    background:#f2ebdf;
    border-bottom:1px solid rgba(23,42,39,.10);
  }
  .writing-filter button{
    position:relative;
    padding:16px 2px 13px;
    color:#5a625e;
    background:transparent!important;
    font-size:9px;
    letter-spacing:.13em;
  }
  .writing-filter button::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:9px;
    height:1px;
    background:#b76b42;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .18s ease;
  }
  .writing-filter button.active{color:#172a27}
  .writing-filter button.active::after,.writing-filter button:hover::after{transform:scaleX(1)}

  /* Selected pieces: one editorial shelf, varied widths, subtle story imagery. */
  .writing-selected{
    padding:34px 7vw 38px;
    background:#eee5d7;
  }
  .writing-selected-head{margin-bottom:14px}
  .writing-selected h2{font-size:clamp(2rem,2.35vw,2.65rem)}
  .selected-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:9px;
  }
  .selected-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:116px;
    padding:15px 16px 13px;
    background:#132f2a;
    border-top:2px solid #b76b42;
  }
  .selected-card:nth-child(1){grid-column:span 3}
  .selected-card:nth-child(2){grid-column:span 2}
  .selected-card:nth-child(3){grid-column:span 3}
  .selected-card:nth-child(4){grid-column:span 2}
  .selected-card:nth-child(5){grid-column:span 2}
  .selected-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 0 42%;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:.19;
    filter:grayscale(.15) saturate(.75) brightness(1.08);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 45%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 45%,black 100%);
  }
  .selected-card:nth-child(1)::before{background-image:url("../images/writing/kept-talking-hero-v1.webp")}
  .selected-card:nth-child(2)::before{background-image:url("../images/south-africa/watercolor-reference-v514.webp")}
  .selected-card:nth-child(3)::before{background-image:url("../images/labels-hero-v1.webp")}
  .selected-card:nth-child(4)::before{background-image:url("../images/dharma-context-hero-v1.webp")}
  .selected-card:nth-child(5)::before{background-image:url("../images/writing/station-hero-v1.webp")}
  .selected-card .context{font-size:7.5px;letter-spacing:.14em}
  .selected-card h3{
    max-width:88%;
    margin:9px 0 6px;
    font-size:clamp(1rem,1.12vw,1.28rem);
    line-height:1.05;
  }
  .selected-card .meta{font-size:7.5px}

  /* Writing shelf: fragments on paper, not another bank of cards. */
  .writing-shelf{
    padding:34px 7vw 42px;
    background:#f7f3eb;
  }
  .writing-shelf-head{margin-bottom:13px}
  .writing-shelf h2{font-size:clamp(2rem,2.35vw,2.65rem)}
  .writing-shelf-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border-top:1px solid rgba(183,107,66,.55);
    border-bottom:1px solid rgba(23,42,39,.10);
  }
  .writing-card,
  .writing-card:nth-child(3n+2),
  .writing-card:nth-child(3n){
    min-height:96px;
    padding:14px 18px 13px;
    background:transparent;
    color:#172a27;
    border:0;
    border-right:1px solid rgba(23,42,39,.12);
    box-shadow:none;
  }
  .writing-card:nth-child(3n){border-right:0}
  .writing-card:nth-child(3n+2){
    background:linear-gradient(180deg,rgba(23,42,39,.045),rgba(23,42,39,.015));
  }
  .writing-card:hover{
    transform:none;
    background:rgba(229,166,90,.07);
  }
  .writing-card .card-type{font-size:8px;letter-spacing:.14em}
  .writing-card h3{margin:9px 0 5px;font-size:clamp(1rem,1.15vw,1.25rem);line-height:1.08}
  .writing-card .card-meta{font-size:7.5px;color:#9a6738}
}
/* WRITING BEAUTIFICATION v237 — restore personality without restoring clutter. */
@media(min-width:851px){
  /* Let each selected piece keep the same dark editorial language while its
     own artwork is actually legible. No new palette, no extra card chrome. */
  .selected-card::before{
    inset:0 0 0 34%;
    opacity:.29;
    filter:grayscale(.08) saturate(.88) brightness(1.16) contrast(.96);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 20%,black 58%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 20%,black 58%,black 100%);
  }
  .selected-card:nth-child(1)::before{background-position:58% 50%}
  .selected-card:nth-child(2)::before{background-position:54% 46%}
  .selected-card:nth-child(3)::before{background-position:58% 48%}
  .selected-card:nth-child(4)::before{background-position:56% 50%}
  .selected-card:nth-child(5)::before{background-position:58% 50%}

  /* A slightly warmer writing-desk field separates the fragments from the
     curated shelf above without introducing another competing color. */
  .writing-shelf{
    position:relative;
    overflow:hidden;
    background:#f1eadf;
  }
  .writing-shelf::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background:
      radial-gradient(ellipse at 13% 34%,rgba(183,107,66,.10),transparent 24%),
      radial-gradient(ellipse at 79% 70%,rgba(23,42,39,.055),transparent 26%),
      repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,42,39,.025) 31px 32px);
  }
  .writing-shelf-head,.writing-shelf-grid,.writing-shelf-more{position:relative;z-index:1}

  /* Three scraps on one desk: no boxes, only whitespace, fine rules and
     different quiet paper/visual treatments. */
  .writing-shelf-grid{
    border-top:1px solid rgba(183,107,66,.58);
    border-bottom:0;
  }
  .writing-card,
  .writing-card:nth-child(3n+2),
  .writing-card:nth-child(3n){
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:112px;
    padding:17px 24px 16px;
    background:rgba(255,252,246,.36);
    border-right:1px solid rgba(23,42,39,.11);
  }
  .writing-card:nth-child(3n+2){background:rgba(231,220,202,.42)}
  .writing-card:nth-child(3n){background:rgba(220,228,218,.34);border-right:0}
  .writing-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    opacity:.11;
    filter:grayscale(1) sepia(.18) contrast(.85);
  }
  .writing-card:nth-child(3n+1)::before{
    width:132px;height:132px;right:-12px;bottom:-42px;
    border:1px solid rgba(183,107,66,.58);
    border-radius:50%;
    box-shadow:0 0 0 13px rgba(183,107,66,.12),0 0 0 28px rgba(183,107,66,.07);
    transform:rotate(-13deg);
  }
  .writing-card:nth-child(3n+2)::before{
    inset:0 0 0 55%;
    background-image:url("../images/writing/hero-writing-still-life.webp");
    background-size:cover;
    background-position:center;
    -webkit-mask-image:linear-gradient(to right,transparent,black 65%);
    mask-image:linear-gradient(to right,transparent,black 65%);
  }
  .writing-card:nth-child(3n)::before{
    inset:5px 8px 5px 58%;
    background-image:url("../images/writing/station-waiting-room-sketch-v1.webp");
    background-size:cover;
    background-position:center;
    opacity:.12;
    -webkit-mask-image:linear-gradient(to right,transparent,black 70%);
    mask-image:linear-gradient(to right,transparent,black 70%);
  }
  .writing-card:hover{background:rgba(255,252,246,.62)}
  .writing-card:nth-child(3n+2):hover{background:rgba(231,220,202,.62)}
  .writing-card:nth-child(3n):hover{background:rgba(220,228,218,.54)}
}

/* WRITING BEAUTIFICATION v238 — stronger composition, same content. */
@media(min-width:851px){
  /* Selected pieces: preserve the editorial band, but let each story image
     carry enough presence to distinguish the pieces at normal viewing size. */
  .writing-selected{
    padding:32px 7vw 36px;
    background:#eee5d7;
  }
  .selected-card::before{
    inset:0 0 0 28%;
    opacity:.39;
    filter:grayscale(.04) saturate(.92) brightness(1.18) contrast(.98);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 20%,black 52%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 20%,black 52%,black 100%);
  }
  .selected-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(90deg,rgba(19,47,42,.98) 0%,rgba(19,47,42,.91) 37%,rgba(19,47,42,.48) 74%,rgba(19,47,42,.28) 100%);
    pointer-events:none;
  }

  /* Writing shelf: a deliberate dark third movement, echoing Learning and
     About. The fragments remain open typography rather than becoming cards. */
  .writing-shelf{
    padding:34px 7vw 44px;
    background:#0d3a33;
    color:#f7f1e6;
  }
  .writing-shelf::before{
    opacity:1;
    background:
      radial-gradient(ellipse at 18% 62%,rgba(229,166,90,.055),transparent 30%),
      radial-gradient(ellipse at 78% 30%,rgba(255,255,255,.035),transparent 27%),
      repeating-linear-gradient(0deg,transparent 0 34px,rgba(255,255,255,.018) 34px 35px);
  }
  .writing-shelf .writing-overline{color:#e5a65a}
  .writing-shelf h2{color:#fffaf0}
  .writing-shelf-grid{
    border-top:1px solid rgba(229,166,90,.72);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .writing-card,
  .writing-card:nth-child(3n+2),
  .writing-card:nth-child(3n){
    min-height:124px;
    padding:19px 25px 18px;
    color:#f8f2e7;
    background:transparent;
    border-right:1px solid rgba(255,255,255,.13);
  }
  .writing-card:nth-child(3n){border-right:0}
  .writing-card .card-type,
  .writing-card .card-meta{color:#e5a65a}
  .writing-card h3{
    position:relative;
    z-index:2;
    max-width:82%;
    color:#fffaf0;
    font-size:clamp(1.08rem,1.28vw,1.38rem);
  }
  .writing-card::before{
    opacity:.22;
    filter:grayscale(.72) sepia(.16) brightness(1.15) contrast(.88);
  }
  .writing-card:nth-child(3n+1)::before{
    width:168px;height:168px;right:-24px;bottom:-62px;
    border:1px solid rgba(229,166,90,.42);
    box-shadow:0 0 0 17px rgba(229,166,90,.07),0 0 0 37px rgba(229,166,90,.035);
    opacity:.46;
  }
  .writing-card:nth-child(3n+2)::before{
    inset:0 0 0 48%;
    background-image:url("../images/writing/hero-writing-still-life.webp");
    background-size:cover;
    background-position:center 58%;
    opacity:.22;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
  }
  .writing-card:nth-child(3n)::before{
    inset:0 0 0 48%;
    background-image:url("../images/writing/station-waiting-room-sketch-v1.webp");
    background-size:cover;
    background-position:center 46%;
    opacity:.25;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
  }
  .writing-card:hover,
  .writing-card:nth-child(3n+2):hover,
  .writing-card:nth-child(3n):hover{
    background:rgba(255,255,255,.035);
  }
}

/* WRITING BEAUTIFICATION v239 — warmer selected cards + tighter writing shelf. */
@media(min-width:851px){
  /* Selected pieces: less rigid, warmer, and more visual. */
  .writing-selected{
    padding:30px 7vw 34px;
    background:#eee5d7;
  }
  .selected-grid{
    gap:10px;
    align-items:stretch;
  }
  .selected-card{
    min-height:132px;
    padding:17px 17px 15px;
    border-top:0;
    border-radius:14px;
    background:#4b3039;
    box-shadow:0 10px 22px rgba(46,28,31,.08);
  }
  .selected-card:nth-child(1){grid-column:span 3}
  .selected-card:nth-child(2){grid-column:span 2}
  .selected-card:nth-child(3){grid-column:span 3}
  .selected-card:nth-child(4){grid-column:span 2}
  .selected-card:nth-child(5){grid-column:span 2}
  .selected-card::before{
    inset:0 0 0 29%;
    opacity:.58;
    filter:saturate(.98) brightness(1.26) contrast(.98);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 18%,black 52%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 18%,black 52%,black 100%);
  }
  .selected-card::after{
    border-radius:14px;
    background:linear-gradient(90deg,rgba(75,48,57,.99) 0%,rgba(75,48,57,.94) 34%,rgba(75,48,57,.54) 72%,rgba(75,48,57,.24) 100%);
  }
  .selected-card .context{color:#e5a65a;font-size:7.5px;letter-spacing:.14em}
  .selected-card h3{
    max-width:86%;
    margin:10px 0 8px;
    color:#fff9ef;
    font-size:clamp(1.02rem,1.1vw,1.24rem);
    line-height:1.06;
  }
  .selected-card .meta{color:#e5a65a;font-size:7.5px}

  /* Writing shelf: keep the dark anchor, but make it smaller, quieter and more image-led. */
  .writing-shelf{
    padding:24px 7vw 28px;
    background:#0d3a33;
  }
  .writing-shelf-head{
    margin-bottom:10px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
  }
  .writing-shelf h2{
    margin-top:5px;
    font-size:clamp(1.65rem,1.95vw,2.05rem);
    line-height:1.02;
  }
  .writing-shelf-grid{
    border-top:1px solid rgba(229,166,90,.58);
    border-bottom:0;
  }
  .writing-card,
  .writing-card:nth-child(3n+2),
  .writing-card:nth-child(3n){
    min-height:92px;
    padding:14px 18px 13px;
    border-right:1px solid rgba(255,255,255,.10);
  }
  .writing-card:nth-child(3n){border-right:0}
  .writing-card .card-type{font-size:7.5px;letter-spacing:.13em}
  .writing-card h3{
    max-width:70%;
    margin:8px 0 4px;
    font-size:clamp(.94rem,1.02vw,1.08rem);
    line-height:1.08;
  }
  .writing-card .card-meta{font-size:7px}

  .writing-card::before{
    opacity:.32;
    filter:grayscale(.42) sepia(.10) brightness(1.28) contrast(.92);
  }
  .writing-card:nth-child(3n+1)::before{
    width:auto;height:auto;
    inset:0 0 0 48%;
    border:0;
    border-radius:0;
    box-shadow:none;
    background-image:url("../images/writing/kept-talking-hero-v1.webp");
    background-size:cover;
    background-position:center;
    opacity:.20;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 60%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 60%,black 100%);
  }
  .writing-card:nth-child(3n+2)::before{
    inset:0 0 0 48%;
    background-image:url("../images/writing/hero-writing-still-life.webp");
    background-size:cover;
    background-position:center 58%;
    opacity:.28;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
  }
  .writing-card:nth-child(3n)::before{
    inset:0 0 0 48%;
    background-image:url("../images/writing/station-waiting-room-sketch-v1.webp");
    background-size:cover;
    background-position:center 46%;
    opacity:.31;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,black 58%,black 100%);
  }
}

/* WRITING BEAUTIFICATION v240 — brighter story art + sketch-derived shelf imagery. */
@media(min-width:851px){
  /* Keep the v239 maroon/rounded-card language, but let every story image read clearly. */
  .selected-card::before{
    inset:0 0 0 24%;
    opacity:.74;
    filter:saturate(1.08) brightness(1.42) contrast(1.01);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.38) 14%,rgba(0,0,0,.88) 42%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.38) 14%,rgba(0,0,0,.88) 42%,black 100%);
  }
  .selected-card::after{
    background:linear-gradient(90deg,rgba(75,48,57,.99) 0%,rgba(75,48,57,.91) 30%,rgba(75,48,57,.43) 66%,rgba(75,48,57,.14) 100%);
  }
  .selected-card:nth-child(1)::before{background-position:62% 50%}
  .selected-card:nth-child(2)::before{background-position:58% 46%}
  .selected-card:nth-child(3)::before{background-position:62% 48%}
  .selected-card:nth-child(4)::before{background-position:60% 50%}
  .selected-card:nth-child(5)::before{background-position:63% 50%}

  /* Use the artwork from the approved sketch for the writing shelf. */
  .writing-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(13,58,51,.98) 0%,rgba(13,58,51,.90) 34%,rgba(13,58,51,.34) 72%,rgba(13,58,51,.10) 100%);
    z-index:0;
  }
  .writing-card>*{position:relative;z-index:2}
  .writing-card::before{
    content:"";
    position:absolute;
    inset:0 0 0 38%;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.68;
    filter:saturate(1.02) brightness(1.18) contrast(.98);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 26%,black 64%,black 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 26%,black 64%,black 100%);
    z-index:0;
  }
  .writing-card:nth-child(3n+1)::before{
    inset:0 0 0 38%;
    background-image:url("../images/writing/v240/shelf-1.webp");
    background-position:center 56%;
    opacity:.63;
  }
  .writing-card:nth-child(3n+2)::before{
    inset:0 0 0 38%;
    background-image:url("../images/writing/v240/shelf-2.webp");
    background-position:center 50%;
    opacity:.78;
  }
  .writing-card:nth-child(3n)::before{
    inset:0 0 0 38%;
    background-image:url("../images/writing/v240/shelf-3.webp");
    background-position:center 52%;
    opacity:.72;
  }
  .writing-card h3{max-width:58%}
}

/* WRITING BEAUTIFICATION v241 — exact approved shelf artwork, softly dissolved edges. */
@media(min-width:851px){
  .writing-card::before{
    inset:-2px -1px -2px 31%;
    background-size:cover;
    filter:saturate(1.06) brightness(1.20) contrast(.98);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.48) 15%,black 34%,black 76%,rgba(0,0,0,.52) 90%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.48) 15%,black 34%,black 76%,rgba(0,0,0,.52) 90%,transparent 100%);
  }
  .writing-card::after{
    background:linear-gradient(90deg,rgba(13,58,51,.99) 0%,rgba(13,58,51,.91) 32%,rgba(13,58,51,.42) 61%,rgba(13,58,51,.17) 78%,rgba(13,58,51,.68) 100%);
  }
  .writing-card:nth-child(3n+1)::before{
    background-image:url("../images/writing/v241/shelf-1-exact.webp");
    background-position:center 55%;
    opacity:.82;
  }
  .writing-card:nth-child(3n+2)::before{
    background-image:url("../images/writing/v241/shelf-2-exact.webp");
    background-position:center 50%;
    opacity:.90;
  }
  .writing-card:nth-child(3n)::before{
    background-image:url("../images/writing/v241/shelf-3-exact.webp");
    background-position:center 50%;
    opacity:.86;
  }
}