/* Clare Hopwood — shared site styles (motion, buttons, placeholders, motifs) */

/* Accessible focus state — used site-wide */
:focus-visible{outline:2px solid #2f4a38;outline-offset:3px;border-radius:2px}

/* Scroll reveals */
.fade-in-up{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.215,.61,.355,1),transform .7s cubic-bezier(.215,.61,.355,1)}
.fade-in-up.visible{opacity:1;transform:translateY(0)}
.fade-in-up.hero-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}.reveal-delay-3{transition-delay:.36s}

/* Header: transparent over hero -> warm solid */
#site-header{background:rgba(246,241,230,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(43,42,36,.09);box-shadow:0 10px 30px -28px rgba(34,56,41,.7);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
#site-header.solid,#site-header.menu-open{background:rgba(246,241,230,.97);border-color:rgba(43,42,36,.12);box-shadow:0 12px 32px -26px rgba(34,56,41,.7)}
/* Pages with a dark hero: light header text turns dark once the bar goes solid */
#site-header.hdr-over-dark.solid nav a,#site-header.hdr-over-dark.menu-open nav a,
#site-header.hdr-over-dark.solid .hdr-logo,#site-header.hdr-over-dark.menu-open .hdr-logo{color:#2b2a24}
#site-header.hdr-over-dark.solid nav a:hover,#site-header.hdr-over-dark.menu-open nav a:hover{color:#2f4a38}
#site-header.hdr-over-dark.solid #menu-btn,#site-header.hdr-over-dark.menu-open #menu-btn{color:#223829}
#site-header.hdr-over-dark.solid .btn-light,#site-header.hdr-over-dark.menu-open .btn-light{border-color:#2f4a38;color:#2f4a38;background:transparent}

/* Premium buttons: light-beam sweep + arrow slide */
.btnx{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s,color .35s,border-color .35s}
.btnx .ar{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btnx:hover{transform:translateY(-3px)}
.btnx:hover .ar{transform:translateX(5px)}
.btnx::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.btnx:hover::after{left:160%}
.btn-field{background:#2f4a38;color:#f2ede0;box-shadow:0 14px 30px -14px rgba(47,74,56,.6)}
.btn-field:hover{background:#223829;box-shadow:0 20px 42px -16px rgba(47,74,56,.75)}
.btn-line{border:1px solid #2f4a38;color:#2f4a38;background:transparent}
.btn-line:hover{background:#2f4a38;color:#f2ede0}
.btn-light{border:1px solid rgba(246,241,230,.65);color:#f6f1e6;background:rgba(246,241,230,.06);backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(246,241,230,.16)}
.btn-mist{background:#537684;color:#fcf9f2}
.btn-mist:hover{background:#435f6b}

/* Oversized editorial name */
.hero-name{font-weight:340;letter-spacing:-.02em;line-height:.92}
.hero-name .ital{font-style:italic;font-weight:300}
.hero-copy{z-index:5}

/* Continuously rolling recognition ribbon */
.ribbon-marquee{overflow:hidden;position:relative}
.ribbon-marquee::before,.ribbon-marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(1.25rem,5vw,5rem);z-index:2;pointer-events:none}
.ribbon-marquee::before{left:0;background:linear-gradient(90deg,#223829,transparent)}
.ribbon-marquee::after{right:0;background:linear-gradient(-90deg,#223829,transparent)}
.ribbon-track{display:flex;width:max-content;will-change:transform;animation:ribbon-roll-right 28s linear infinite}
.ribbon-marquee:hover .ribbon-track,.ribbon-marquee:focus-within .ribbon-track{animation-play-state:paused}
.ribbon-group{display:flex;align-items:center;flex-shrink:0;padding:2rem 1.5rem;gap:clamp(2.75rem,6vw,6rem)}
.ribbon-item{position:relative;flex:0 0 auto;min-width:clamp(13rem,20vw,17rem);text-align:center}
.ribbon-item::after{content:"✦";position:absolute;top:50%;right:calc(clamp(2.75rem,6vw,6rem) / -2);transform:translate(50%,-50%);color:#a9884e;font-size:.55rem;opacity:.9}
@keyframes ribbon-roll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Real photography */
.hero-photo,.photo-frame,.photo-tile{position:relative;overflow:hidden;background:#223829}
.hero-photo img,.photo-frame img,.photo-tile img{display:block}
.hero-photo img{position:relative;z-index:1}
.hero-photo.grain::before{z-index:2}
.hero-photo-wash{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(246,241,230,.22),transparent 28%),linear-gradient(0deg,rgba(20,34,25,.28),transparent 42%);pointer-events:none}
.photo-credit{position:absolute;right:1rem;bottom:1rem;z-index:4;color:#fff;font-size:.58rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.photo-frame{box-shadow:0 28px 55px -30px rgba(34,56,41,.52)}
.photo-frame--foh{background:#f3e7ce}
.photo-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,34,25,.72),transparent 52%);transition:opacity .35s ease;pointer-events:none}
.photo-tile:hover::after{opacity:.82}
.photo-tile-label{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.social-gallery .photo-tile:nth-child(2),.social-gallery .photo-tile:nth-child(4){transform:translateY(1.5rem)}

@media (max-width:767px){
  .social-gallery .photo-tile:nth-child(2),.social-gallery .photo-tile:nth-child(4){transform:none}
  .photo-credit{right:.75rem;bottom:.75rem;font-size:.52rem}
}

/* Field contour rule — draws across between sections */
.field-line path{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1)}
.field-line.visible path{stroke-dashoffset:0}

/* Photograph placeholders — clearly labelled, replaced by approved photography */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,#3a5a44 0%,#2f4a38 46%,#223829 100%);color:#e9e2cf}
.ph--mist{background:linear-gradient(160deg,#7d9aa5 0%,#537684 55%,#3c5a66 100%);color:#f0f4f5}
.ph--oat{background:linear-gradient(160deg,#e9dfc8 0%,#d9cba8 60%,#c4b28a 100%);color:#4c4634}
.ph svg.ph-contours{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.ph .ph-label{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.25rem;background:linear-gradient(to top,rgba(34,56,41,.72),transparent);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.ph--oat .ph-label{background:linear-gradient(to top,rgba(76,70,52,.6),transparent);color:#f6f1e6}
.ph .ph-tag{position:absolute;top:1rem;left:1rem;padding:.3rem .65rem;border:1px solid currentColor;border-radius:9999px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}

/* Scroll progress */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#2f4a38,#a9884e);z-index:100;transition:width .12s ease-out}

/* Back to top */
#totop{position:fixed;right:22px;bottom:22px;z-index:80;width:48px;height:48px;border-radius:9999px;background:#2f4a38;color:#f2ede0;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,background .3s;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
#totop.show{opacity:1;pointer-events:auto;transform:none}
#totop:hover{background:#223829}

/* Privacy notice */
.privacy-banner{position:fixed;z-index:2000;left:50%;bottom:18px;width:min(1040px,calc(100% - 36px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:20px 22px;border:1px solid rgba(242,237,224,.2);border-radius:20px;background:rgba(34,56,41,.97);color:#f2ede0;box-shadow:0 24px 70px rgba(20,34,25,.42);backdrop-filter:blur(18px);transform:translate(-50%,calc(100% + 42px));opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility .3s ease}
.privacy-banner[data-visible="true"]{transform:translate(-50%,0);opacity:1;visibility:visible}
.privacy-banner-copy{display:grid;grid-template-columns:38px minmax(0,1fr);gap:15px;align-items:start}
.privacy-banner-mark{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(169,136,78,.2);color:#d9c38f;font-size:17px}
.privacy-banner h2{margin:0 0 5px;color:#f2ede0;font-family:Fraunces,serif;font-size:25px;font-weight:400;line-height:1.1}
.privacy-banner p{margin:0;max-width:62ch;color:rgba(242,237,224,.76);font-size:12.5px;line-height:1.55}
.privacy-banner a{color:#f2ede0;text-decoration:underline;text-decoration-color:rgba(242,237,224,.45);text-underline-offset:3px}
.privacy-banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:304px}
.privacy-choice{min-height:45px;padding:10px 15px;border:1px solid rgba(242,237,224,.4);border-radius:9999px;color:#f2ede0;background:transparent;font-size:11px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.privacy-choice:hover,.privacy-choice:focus-visible{border-color:#f2ede0;background:rgba(242,237,224,.1)}
.privacy-choice-primary{border-color:#d9c38f;background:#d9c38f;color:#223829}
.privacy-choice-primary:hover,.privacy-choice-primary:focus-visible{border-color:#f2ede0;background:#f2ede0;color:#223829}
.privacy-choice:focus-visible{outline:2px solid #f2ede0;outline-offset:3px}

@media(max-width:760px){
  .privacy-banner{bottom:10px;width:calc(100% - 20px);grid-template-columns:1fr;gap:18px;padding:20px;border-radius:19px}
  .privacy-banner-copy{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .privacy-banner-mark{width:30px;height:30px;font-size:14px}
  .privacy-banner h2{font-size:23px}
  .privacy-banner-actions{min-width:0;width:100%}
  .privacy-choice{min-height:47px;padding-inline:11px}
}

/* Event + story cards */
.cardx{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.cardx:hover{transform:translateY(-5px);box-shadow:0 26px 50px -24px rgba(34,56,41,.35)}

/* Fine paper grain over hero imagery */
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:3px 3px}

/* Urgent support panel */
.support-panel{border-left:3px solid #537684}

/* Reduced motion: still content, no animation */
@media (prefers-reduced-motion: reduce){
  .fade-in-up{opacity:1;transform:none;transition:none}
  .field-line path{stroke-dashoffset:0;transition:none}
  .ribbon-track{animation:none;transform:none;width:100%}
  .ribbon-group{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .ribbon-group[aria-hidden="true"]{display:none}
  .ribbon-item{min-width:0}
  .ribbon-item::after{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

@media (max-width:767px) and (prefers-reduced-motion: reduce){
  .ribbon-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}