/* ==========================================================================
   Design v1.1 “Living Coast”
   Loaded only when Settings → General → “Design v1.1” is on (body.v11).
   Switch it off (or delete this file and js/v11.js) to return to v1.0.
   ========================================================================== */

.v11 {
    --wave-h: clamp(56px, 6.5vw, 104px);
    --wave-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 7.5 2 15 8 T 30 8 T 45 8 T 60 8 T 75 8 T 90 8 T 105 8 T 120 8' fill='none' stroke='%231c7c45' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --wave-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 7.5 2 15 8 T 30 8 T 45 8 T 60 8 T 75 8 T 90 8 T 105 8 T 120 8' fill='none' stroke='%2399c4ab' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Heading marks (set in the admin): *highlight* and ~wave underline~ ---------- */
.v11 .accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.v11 .section-title .accent { color: var(--accent); }
.v11 .is-dark .section-title .accent, .v11 .page-header.has-image .page-title .accent, .v11 .cta-title .accent { color: var(--accent-glow); }
.v11 .page-title .accent { color: var(--accent); }

/* ---------- Hero ---------- */
.v11 .hero.has-waves .hero-content { padding-bottom: calc(var(--wave-h) + 40px); }
.v11 .hero .tide-gauge { display: none; }   /* the photo and headline carry the hero */
.v11 .hero.has-waves .hero-text { max-width: 600px; }
/* A soft deep-water gradient at the bottom, so the shoreline sits on calm water, not bright reflections */
.v11 .hero.has-waves .hero-media::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 45%; pointer-events: none;
    background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 70%, transparent) 0%, color-mix(in srgb, var(--navy) 25%, transparent) 45%, transparent 100%); }
/* Headline rises in word by word (words are wrapped by js/v11.js) */
.v11 .hero-title[data-kinetic] { animation: none; }
.v11 .hero-title .kw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin-bottom: -.14em; }
.v11 .hero-title .kw > span { display: inline-block; transform: translateY(110%); animation: v11WordRise .95s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 75ms + .15s); }
@keyframes v11WordRise { to { transform: none; } }
/* The highlighted phrase: serif italic with a hand-drawn wave underline that draws itself in */
.v11 .hero-title .accent { color: #fff; }
/* ~Wave underline~: draws itself in (hero and page headers on load, sections as they scroll into view) */
.v11 .wave {
    padding-bottom: .12em; background: var(--wave-on-light) 0 100% / 100% .3em no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.v11 :is(.hero, .is-dark, .page-header.has-image, .cta-panel) .wave { background-image: var(--wave-on-dark); }
.v11 :is(.hero-title, .page-title) .wave { background-size: 0 .3em; animation: v11Underline 1.1s var(--ease-out) 1.25s forwards; }
.v11 .page-title .wave { animation-delay: .5s; }
.js .v11 [data-reveal] .wave { background-size: 0 .3em; transition: background-size 1.1s var(--ease-out) .45s; }
.js .v11 [data-reveal].is-visible .wave { background-size: 100% .3em; }
@keyframes v11Underline { to { background-size: 100% .3em; } }
/* Main button: a gentle shine once after load, and on hover */
.v11 .btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.v11 .btn-accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); }
.v11 .btn-accent:hover::after { animation: v11Shine .8s var(--ease-out); }
.v11 .hero .btn-accent::after { animation: v11Shine 1.2s var(--ease-out) 1.9s; }
@keyframes v11Shine { from { left: -70%; } to { left: 135%; } }
.v11 .hero.has-waves .hero-scroll { display: none; }   /* the tide band below invites scrolling instead */
.v11 .hero-title[data-kinetic] { margin-bottom: 28px; }

/* ---------- Shoreline (hero and inner page headers) ----------
   One clean coastline curve with a single contour line running parallel to it, edge to edge,
   like a nautical chart. The line fades in once on load; nothing keeps moving. */
.v11 .hero-shore, .v11 .page-header-shore { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; pointer-events: none; }
.v11 .hero-shore { height: var(--wave-h); }
.v11 .page-header-shore { height: clamp(40px, 4.5vw, 70px); }
.v11 .hero-shore svg, .v11 .page-header-shore svg { display: block; width: 100%; height: 100%; overflow: visible; }
.v11 .shore-line { fill: none; stroke: var(--accent-glow); stroke-width: 1.6px; vector-effect: non-scaling-stroke;
    opacity: 0; animation: v11Contour 1.6s var(--ease-out) .6s forwards; }
@keyframes v11Contour { from { opacity: 0; transform: translateY(6px); } to { opacity: .9; transform: none; } }
/* The land fills with whatever comes next: the tide band (deep navy) or the page */
.v11 .shore-fill { fill: #fff; }
.v11 .hero-shore.to-band .shore-fill { fill: var(--navy); }
.v11 .page-header:has(+ .bg-soft) .shore-fill { fill: var(--sand); }
.v11 .page-header:has(+ .bg-mist) .shore-fill { fill: var(--mist); }
/* On the light page header (no photo), the contour lines use the brand colours */
.v11 .page-header:not(.has-image) .shore-line { stroke: var(--accent); }
.v11 .page-header { padding-bottom: calc(88px + 28px); }
.v11 .page-header.has-image { padding-bottom: calc(104px + 32px); }

/* ---------- Tide band: the focus areas flow past ---------- */
.v11 .tide-band { position: relative; overflow: hidden; padding: 14px 0 26px; background: var(--navy); color: #fff; }
.v11 .tide-band::before, .v11 .tide-band::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(40px, 8vw, 120px); pointer-events: none; }
.v11 .tide-band::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.v11 .tide-band::after { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.v11 .tide-band-track { display: flex; width: max-content; animation: v11Tide 48s linear infinite; }
.v11 .tide-band:hover .tide-band-track, .v11 .tide-band:focus-within .tide-band-track { animation-play-state: paused; }
@keyframes v11Tide { to { transform: translateX(-50%); } }
.v11 .tide-band ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.v11 .tide-band li { display: flex; align-items: center; }
.v11 .tide-band a { display: inline-flex; align-items: center; gap: 14px; padding: 6px 4px; color: #fff; text-decoration: none; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, .85rem + .9vw, 1.65rem); letter-spacing: -.015em; transition: color .3s; }
.v11 .tide-band a:hover { color: var(--accent-glow); }
.v11 .tide-band-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--accent); color: #fff; transition: transform .4s var(--ease-out); }
.v11 .tide-band a:hover .tide-band-icon { transform: rotate(-8deg) scale(1.08); }
.v11 .tide-band-icon .icon { width: 20px; height: 20px; }
.v11 .tide-band-sep { display: inline-flex; margin: 0 clamp(20px, 3vw, 40px); color: var(--accent-glow); opacity: .55; }
.v11 .tide-band-sep .icon { width: 22px; height: 22px; }

/* ---------- Images wipe in as they scroll into view ----------
   Only elements INSIDE the observed [data-reveal] element are clipped: a clipped element
   itself would never count as "in view" for the browser, so it would stay hidden. */
.js .v11 [data-reveal] :is(.post-card-media, .im-frame, .media-frame, .focus-row-media),
.js .v11 :is(.focus-tile, .gallery-item)[data-reveal] > img {
    clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-out) .1s;
}
.js .v11 [data-reveal].is-visible :is(.post-card-media, .im-frame, .media-frame, .focus-row-media),
.js .v11 :is(.focus-tile, .gallery-item)[data-reveal].is-visible > img { clip-path: inset(0); }

/* ---------- Focus tiles: a soft light follows the cursor ---------- */
.v11 .focus-tile .tile-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 45%); }
.v11 .focus-tile:hover .tile-spot { opacity: 1; }

/* ---------- Call to action: a slow tide moving through the panel ---------- */
.v11 .cta-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 90px; pointer-events: none; opacity: .14;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 150 0 150 80 300 40 S 450 0 600 40 V90 H0Z' fill='%23ffffff'/%3E%3Cpath d='M0 60 C 150 25 150 95 300 60 S 450 25 600 60 V90 H0Z' fill='%23ffffff' opacity='.6'/%3E%3C/svg%3E") 0 100% / 600px 90px repeat-x;
    animation: v11CtaTide 18s linear infinite; }
@keyframes v11CtaTide { to { background-position-x: 600px; } }

/* ---------- Introduction with media: a signature portrait ----------
   A tide-lined block sits offset behind the photo. When the section scrolls into view, the
   photo wipes in, then the name card opens left to right, a light line draws across it, the
   name rises word by word and the title follows. Tide bars beside the name sway gently,
   like a voice, and quicken while the video plays. */
.v11 .im-figure { isolation: isolate; }
.v11 .im-figure::before { content: ""; position: absolute; z-index: -1; top: -22px; right: -22px; width: 58%; height: 64%; pointer-events: none;
    background: var(--tide-lines), var(--accent-soft); border-top: 3px solid var(--accent); }
.v11 .media-left .im-figure::before { right: auto; left: -22px; }
.v11 .im-frame { transition: box-shadow .5s var(--ease-out); }
.v11 .im-media:hover .im-frame { box-shadow: 0 40px 80px -30px rgba(10, 26, 47, .45); }

/* The play button breathes softly until it's used */
.v11 .im-play-icon { position: relative; }
.v11 .im-play-icon::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.85); opacity: 0; pointer-events: none; animation: v11Ping 3.4s var(--ease-out) 2.4s infinite; }
@keyframes v11Ping { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.55); } }

/* Name card */
.v11 .cap-badge .im-caption { isolation: isolate; padding: 20px 64px 20px 26px; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.v11 .cap-badge .im-caption::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-glow); transform-origin: left; }
.v11 .cap-badge .im-caption::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tide-lines-light); }
.v11 .im-media:hover .cap-badge .im-caption { transform: translateY(-5px); box-shadow: 0 30px 60px -20px rgba(6, 16, 34, .55); }
.v11 .cap-title .cw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.v11 .cap-title .cw > span { display: inline-block; }

/* Tide bars: a quiet "voice" beside the name */
.v11 .cap-voice { position: absolute; right: 24px; top: 50%; display: flex; align-items: center; gap: 3px; height: 22px; transform: translateY(-50%); }
.v11 .cap-voice i { width: 3px; height: 100%; background: currentColor; opacity: .75; transform: scaleY(.3); animation: v11Voice 2.6s ease-in-out infinite; }
.v11 .cap-voice i:nth-child(2) { animation-delay: -.6s; }
.v11 .cap-voice i:nth-child(3) { animation-delay: -1.3s; }
.v11 .cap-voice i:nth-child(4) { animation-delay: -1.9s; }
@keyframes v11Voice { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.v11 .im-figure:has(.is-playing) .cap-voice i { animation-duration: .9s; opacity: 1; }

/* Before the section is in view (only when scripts run, so nothing is ever hidden without them).
   The timing lives on the visible state only, so nothing animates when the page first loads. */
.js .v11 .im-media[data-reveal] .cap-badge .im-caption { clip-path: inset(0 100% 0 0); }
.js .v11 .im-media[data-reveal] .cap-badge .im-caption::before { transform: scaleX(0); }
.js .v11 .im-media[data-reveal] .cap-title .cw > span { transform: translateY(110%); }
.js .v11 .im-media[data-reveal] .cap-badge .cap-text { opacity: 0; transform: translateY(8px); }
.js .v11 .im-media[data-reveal] .cap-voice { opacity: 0; }
.js .v11 .im-media[data-reveal] .im-quote { opacity: 0; transform: translateY(14px); }
.js .v11 .im-media[data-reveal] .im-figure::before { transform: translate(-22px, 22px); opacity: 0; }
.js .v11 .im-media.is-visible .cap-badge .im-caption { clip-path: inset(0);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), clip-path 1s cubic-bezier(.77, 0, .18, 1) .75s; }
.js .v11 .im-media.is-visible .cap-badge .im-caption::before { transform: scaleX(1); transition: transform .9s var(--ease-out) 1.45s; }
.js .v11 .im-media.is-visible .cap-title .cw > span { transform: none; transition: transform .8s var(--ease-out) calc(1.25s + var(--i, 0) * .09s); }
.js .v11 .im-media.is-visible .cap-badge .cap-text { opacity: .88; transform: none; transition: opacity .8s var(--ease-out) 1.7s, transform .8s var(--ease-out) 1.7s; }
.js .v11 .im-media.is-visible .cap-voice { opacity: 1; transition: opacity .6s 1.9s; }
.js .v11 .im-media.is-visible .im-quote { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) 1.9s, transform .9s var(--ease-out) 1.9s; }
.js .v11 .im-media.is-visible .im-figure::before { transform: none; opacity: 1; transition: transform 1.2s var(--ease-out) .5s, opacity 1s .5s; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .v11 { --wave-h: 40px; }
    .v11 .hero.has-waves .hero-content { padding-bottom: calc(var(--wave-h) + 18px); }
    .v11 .hero-title[data-kinetic] { margin-bottom: 34px; }
    .v11 .tide-band { padding: 10px 0 18px; }
    .v11 .tide-band a { gap: 10px; font-size: 1.05rem; }
    .v11 .tide-band-icon { width: 32px; height: 32px; }
    .v11 .tide-band-icon .icon { width: 17px; height: 17px; }
    .v11 .tide-band-sep { margin: 0 18px; }
    .v11 .page-header { padding-bottom: calc(56px + 20px); }
    .v11 .page-header.has-image { padding-bottom: calc(64px + 22px); }
    .v11 .im-figure::before { top: -12px; right: -10px; }
    .v11 .media-left .im-figure::before { left: -10px; }
    .v11 .cap-badge .im-caption { padding: 16px 54px 16px 20px; }
    .v11 .cap-voice { right: 18px; height: 18px; }
}
@media (max-width: 560px) {
    .v11 .cap-badge .im-caption { padding: 12px 40px 13px 16px; }
    .v11 .cap-voice { right: 14px; gap: 2px; height: 14px; }
    .v11 .cap-voice i { width: 2px; }
}

/* ---------- Respect “reduce motion”: everything still shows, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
    .v11 .hero-title .kw > span { transform: none; animation: none; }
    .v11 .wave, .js .v11 [data-reveal] .wave { background-size: 100% .3em; animation: none; transition: none; }
    .v11 .shore-line { opacity: .9; animation: none; }
    .v11 .cta-panel::after, .v11 .btn-accent::after { animation: none; }
    .v11 .tide-band-track { animation: none; }
    .v11 .tide-band { overflow-x: auto; }
    .v11 .cap-voice i, .v11 .im-play-icon::after { animation: none; }
    .js .v11 .im-media[data-reveal] :is(.cap-badge .im-caption, .cap-title .cw > span, .cap-badge .cap-text, .cap-voice, .im-quote) { clip-path: none; transform: none; opacity: 1; transition: none; }
    .js .v11 .im-media[data-reveal] .cap-badge .im-caption::before, .js .v11 .im-media[data-reveal] .im-figure::before { transform: none; opacity: 1; transition: none; }
    .js .v11 [data-reveal] :is(.post-card-media, .im-frame, .media-frame, .focus-row-media),
    .js .v11 :is(.focus-tile, .gallery-item)[data-reveal] > img { clip-path: none; }
}