/* ===========================================================================
   WORDPAINT | LISTEN TO THE HEART | SEA & SKY
   Revised STYLE.CSS — only CSS changes; HTML and JPGs are unchanged.

   FIND YOUR WAY AROUND THE PAGE
     01  Page colours + EASY IMAGE VISIBILITY CONTROLS
     02  Page frame / outer wrapper
     03  Intro header / title / upper-right sailboat
     04  Shared styles for all five text sections
     05  Section 1: "One day, this 'you'..."
     06  Section 2: "And what do you have now?"       [LEFT BOAT]
     07  Section 3: "This is not just 'talk'."          [BLUE/GOLD BOX]
     08  Section 4: "And what I say to people..."      [RIGHT HARBOUR]
     09  Section 5: "And if you're not interested..."  [LEFT SUNLIT WATER]
     10  Outro: "There is more."
     11  Tablet adjustments (760px and below)
     12  Phone adjustments (480px and below)

   IMPORTANT: Bigger opacity numbers show MORE of an image.
              0 = invisible; 1 = fully opaque.
   =========================================================================== */

/* 01. PALETTE + IMAGE VISIBILITY — ADJUST THESE NUMBERS FIRST
   Values assume you already increased the earlier image opacity by ~0.10.
   The boat in SECTION 2 and the harbour in SECTION 4 receive another ~0.10.
   Change only the listed variables to fine-tune visibility on desktop. */
:root{
  --ink:#30495f;                     /* Body text: slate navy */
  --ink-deep:#29455e;                /* Section headings */
  --gold:#a7793e;                    /* Gold subheadings + fine border */
  --outer:#849bac;                   /* Outer-page tone */
  --section-line:rgba(255,255,255,.78);

  --opacity-hero-water:.57;          /* INTRO: water/sky background */
  --opacity-hero-boat:.78;           /* INTRO: upper-right sailboat */
  --opacity-section2-water:.35;      /* SECTION 2: left-side water/sky wash */
  --opacity-section2-boat:.77;       /* SECTION 2: LEFT BOAT — MORE VISIBLE */
  --opacity-section4-clouds:.34;     /* SECTION 4: right-side atmospheric wash */
  --opacity-section4-harbour:.69;    /* SECTION 4: RIGHT HARBOUR — MORE VISIBLE */
  --opacity-section5-water:.49;      /* SECTION 5: left-side warm horizon */
  --opacity-outro-water:.28;         /* OUTRO: water texture */
}
/* 02. PAGE FRAME — body / outside background and the pale page wrapper. */
*{box-sizing:border-box}
html{background:#8398ab}
body{
  margin:0;
  padding:26px 28px 46px;
  background:linear-gradient(120deg,#8198ac 0%,#b9cbd8 48%,#7894aa 100%);
  color:var(--ink);
  font-family:'Junge',Georgia,serif;
}
.page{
  max-width:1080px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(250,253,253,.95);
  box-shadow:0 16px 48px rgba(27,55,77,.38);
  background:linear-gradient(180deg,
    #f3f9fb 0%,#eff7fa 20%,#f6f9f8 42%,
    #e9f2f5 65%,#d5e2ea 80%,#5c7e99 100%);
}
/* 03. INTRO / TOP HEADER — title, link, ornament, water and upper-right sailboat.
   Photo layers: assets/high-horizon.jpg and assets/sailboat-upper-right.jpg */
.hero{
  min-height:328px;
  padding:32px 55px 55px;
  position:relative;
  text-align:center;
  isolation:isolate;
}
.small-nav{position:relative;z-index:4;text-align:right;font:17px Georgia,serif}
.small-nav a{color:#735d42;text-decoration:none}
.small-nav a:hover{text-decoration:underline;color:#3c5b76}
.byline{position:relative;z-index:3;margin:36px 0 0;color:#708697;font:15px Georgia,serif;letter-spacing:.26em}
.hero h1{
  position:relative;z-index:3;
  font:normal clamp(53px,6.7vw,81px)/1.1 'Forum',Georgia,serif;
  color:#2d465d;margin:20px 0 16px;
}
.hero h1 em{font-size:.7em;color:#ad824b;font-weight:400}
.ornament{
  display:flex;align-items:center;justify-content:center;
  gap:15px;height:23px;color:#ad864e;
  position:relative;z-index:3;
}
.ornament:before,.ornament:after{
  content:'';height:1px;width:112px;
  background:linear-gradient(90deg,transparent,#b7945b)
}
.ornament:after{transform:scaleX(-1)}
.ornament span{font-size:24px;line-height:1}
.hero-water,.hero-boat,.mist-left,.boat-left,.cloud-right,.harbour-right,.warm-left,.ending-water{
  position:absolute;z-index:0;pointer-events:none;
}
.hero-water{
  inset:0 0 -42px 27%;
  background:linear-gradient(90deg,#f3f9fb 0%,rgba(243,249,251,.25) 52%,transparent 100%),
  url('../../images/pages/listen-heart/high-horizon.jpg') center 58% /cover no-repeat;
  opacity:var(--opacity-hero-water);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 54%),linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 54%),linear-gradient(180deg,#000 55%,transparent 100%);
  mask-composite:intersect;
}
.hero-boat{
  width:370px;height:174px;right:3px;top:105px;
  background:url('../../images/pages/listen-heart/sailboat-upper-right.jpg') center/cover no-repeat;
  opacity:var(--opacity-hero-boat);
  -webkit-mask-image:radial-gradient(ellipse 73% 70% at 64% 51%,#000 48%,transparent 100%);
  mask-image:radial-gradient(ellipse 73% 70% at 64% 51%,#000 48%,transparent 100%);
}
/* 04. SHARED TEXT-SECTION RULES — headings, paragraphs, gold subtitles. */
.movement{
  position:relative;isolation:isolate;
  padding:78px 76px 84px;
  border-top:1px solid var(--section-line);
}
.copy{position:relative;z-index:2;max-width:685px}
.movement h2{
  margin:0 0 18px;
  font:normal clamp(31px,3.35vw,41px)/1.18 'Forum',Georgia,serif;
  color:var(--ink-deep);
}
.movement p{font-size:18px;line-height:1.66;margin:0 0 15px}
.movement p:last-child{margin-bottom:0}
.movement .gold-subhead{
  margin:-4px 0 26px;
  color:var(--gold);
  font:normal 17px/1.4 Georgia,serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* 05. SECTION 1 — "One day, this 'you' will not be around." */
.first{padding-top:70px;padding-bottom:90px}
.first .copy{max-width:640px}
/* 06. SECTION 2 — "And what do you have now?"
   LEFT BOAT photo: assets/sailboat-left.jpg, on .boat-left
   Left water backdrop: assets/high-horizon.jpg, on .mist-left */
.second{padding-top:82px;padding-bottom:92px}
.second .copy{
  max-width:660px;
  margin-left:clamp(0px,calc(25% - 100px),180px);
}
.mist-left{
  inset:0 46% 0 0;
  background:linear-gradient(90deg,rgba(230,244,250,.46),transparent 90%),url('../../images/pages/listen-heart/high-horizon.jpg') center 64%/cover no-repeat;
  opacity:var(--opacity-section2-water);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,transparent 100%);
}
.boat-left{
  left:-6px;top:15%;width:47%;height:270px;
  background:url('../../images/pages/listen-heart/sailboat-left.jpg') center/cover no-repeat;
  opacity:var(--opacity-section2-boat);
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 99%),linear-gradient(180deg,transparent 0%,#000 28%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 20%,transparent 99%),linear-gradient(180deg,transparent 0%,#000 28%,#000 70%,transparent 100%);
  mask-composite:intersect;
}
/* 07. SECTION 3 — "This is not just 'talk'."
   CENTRED FEATURE BOX: change .third .feature-box background below.
   No image is used here. */
.third{
  padding:4px 0 12px;
  background:linear-gradient(130deg,rgba(251,252,250,.56),rgba(233,244,247,.36));
}
.third .feature-box{
  max-width:none;
  margin:5% 10%;
  padding:clamp(32px,4.4vw,52px);
  /* SECTION 3 ONLY: atmospheric blue / ivory / pale gold treatment.
     No photograph: keeps this important message free from image distraction. */
  background:
    radial-gradient(ellipse at 82% 20%, rgba(220,186,116,.26), transparent 53%),
    radial-gradient(ellipse at 10% 86%, rgba(149,193,222,.24), transparent 60%),
    linear-gradient(130deg,
      rgba(216,233,245,.97) 0%,
      rgba(239,248,252,.97) 41%,
      rgba(248,243,227,.94) 76%,
      rgba(227,239,247,.96) 100%);
  border:1px solid rgba(178,143,89,.83);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 10px 26px rgba(76,111,135,.10);
}
/* 08. SECTION 4 — "And what I say to people is come and listen."
   RIGHT HARBOUR photo: assets/harbour-right.jpg, on .harbour-right
   Right clouds/sky: assets/high-horizon.jpg, on .cloud-right */
.fourth{padding-top:88px;padding-bottom:108px}
.fourth .copy{max-width:650px}
.cloud-right{
  inset:-10px 0 0 47%;
  background:linear-gradient(90deg,#f4f8f9 0%,transparent 100%),url('../../images/pages/listen-heart/high-horizon.jpg') center 33%/cover no-repeat;
  opacity:var(--opacity-section4-clouds);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 85%);
  mask-image:linear-gradient(90deg,transparent,#000 85%);
}
.harbour-right{
  right:0;bottom:10px;width:48%;height:245px;
  background:url('../../images/pages/listen-heart/harbour-right.jpg') center/cover no-repeat;
  opacity:var(--opacity-section4-harbour);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 65%),linear-gradient(180deg,transparent 0%,#000 36%,#000 65%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 65%),linear-gradient(180deg,transparent 0%,#000 36%,#000 65%,transparent 100%);
  mask-composite:intersect;
}
/* 09. SECTION 5 — "And if you're not interested - fine."
   Left warm water: assets/gold-horizon.jpg, on .warm-left */
.fifth{
  padding-top:90px;padding-bottom:150px;
  background:linear-gradient(180deg,rgba(220,237,246,.08),rgba(160,188,207,.27) 72%,rgba(118,155,181,.22));
}
.fifth .copy{
  max-width:690px;
  margin-left:clamp(0px,calc(23% - 50px),190px);
}
.warm-left{
  inset:0 44% -20px 0;
  background:linear-gradient(90deg,rgba(240,249,251,.04),rgba(240,249,251,.45)),url('../../images/pages/listen-heart/gold-horizon.jpg') 58% 58%/cover no-repeat;
  opacity:var(--opacity-section5-water);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 95%),linear-gradient(180deg,transparent 0%,#000 23%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0%,transparent 95%),linear-gradient(180deg,transparent 0%,#000 23%,#000 78%,transparent 100%);
  mask-composite:intersect;
}
/* 10. OUTRO — "There is more."
   Deep-water gradient and water texture, already approved. */
.outro{
  position:relative;isolation:isolate;
  margin-top:-100px;
  padding:130px 32px 102px;
  text-align:center;
  color:#f5f3e9;
  background:linear-gradient(180deg,
    rgba(151,183,201,0) 0%,
    rgba(122,157,181,.28) 22%,
    rgba(88,127,155,.67) 48%,
    #466982 77%,
    #375971 100%);
}
.outro h2{
  position:relative;z-index:2;
  font:normal clamp(48px,5.9vw,70px)/1.12 'Forum',Georgia,serif;
  margin:26px 0 9px;color:#fffaf0;
}
.outro p{
  position:relative;z-index:2;
  font:italic clamp(23px,3.1vw,34px)/1.3 'Forum',Georgia,serif;
  color:#e3bf88;margin:0 0 20px;
}
.outro .ornament{margin-top:10px}
.ending-water{
  inset:0;background:url('../../images/pages/listen-heart/high-horizon.jpg') center 78% /cover no-repeat;
  opacity:var(--opacity-outro-water);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 80%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 80%);
}

/* link1 for bottom nav anchor */

.link1 {
	font-family: 'Forum', cursive;
	font-size: 18px; 
	text-decoration: none;
	}
		
	a.link1:link { color: #476178; }
	a.link1:visited {color: #476178;}
	a.link1:active {color: #AAB5C5;}
	a.link1:hover {color: #FFF; text-decoration:underline; }
	
	
/* 11. TABLET — 760px and below. Lower image opacity to protect readable text. */
@media(max-width:760px){
  :root{
    --opacity-hero-water:.40;
    --opacity-hero-boat:.48;
    --opacity-section2-water:.29;
    --opacity-section2-boat:.32;       /* SECTION 2 boat, tablet */
    --opacity-section4-clouds:.29;
    --opacity-section4-harbour:.32;    /* SECTION 4 harbour, tablet */
    --opacity-section5-water:.29;
  }
  body{padding:16px 14px 26px}
  .hero{min-height:300px;padding:26px 22px 55px}
  .byline{margin-top:30px;font-size:12px}
  .hero h1{font-size:clamp(40px,8vw,62px);margin-top:24px}
  .hero-boat{right:-30px;top:116px;width:255px;height:138px}
  .hero-water{left:20%}
  .movement{padding:60px 36px 65px}
  .movement h2{font-size:clamp(28px,4.5vw,35px)}
  .movement p{font-size:17px;line-height:1.65}
  .movement .gold-subhead{font-size:15px;letter-spacing:.12em}
  .second .copy,.fifth .copy{margin-left:0;max-width:100%}
  .boat-left,.harbour-right{width:60%}
  .third{padding:8px 0 14px}
  .third .feature-box{margin:6% 7%;padding:30px}
  .outro{padding:115px 24px 80px;margin-top:-76px}
}
/* 12. PHONE — 480px and below. Keep boats atmospheric behind the text. */
@media(max-width:480px){
  :root{
    --opacity-hero-boat:.33;
    --opacity-section2-boat:.21;      /* SECTION 2 boat, phone */
    --opacity-section4-harbour:.21;   /* SECTION 4 harbour, phone */
  }
  body{padding:13px 11px 23px}
  .hero{min-height:270px;padding:24px 18px 38px}
  .small-nav{font-size:14px}
  .hero h1{font-size:clamp(36px,9vw,45px)}
  .hero-boat{right:-53px;top:128px;width:205px;height:114px}
  .movement{padding:46px 24px 58px}
  .movement h2{font-size:29px}
  .movement p{font-size:17px}
  .movement .gold-subhead{font-size:14px;letter-spacing:.095em}
  .boat-left,.harbour-right{width:70%;top:auto;bottom:5%;height:170px}
  .third{padding:4px 0 8px}
  .third .feature-box{margin:6% 5%;padding:27px 22px}
  .outro{margin-top:-56px;padding:99px 16px 73px}
  .outro h2{font-size:48px}
  .outro p{font-size:23px}
}