/* v2 layer: Rye Island style layout and buttons, videos, falling pieces, transition pane. Loaded after site.css */
:root{--corn:#FC5340;--corn-tint:#FEB5AD;--corn-confection:#6A4EA1;--corn-confection-tint:#BFB3D6;--sunflower:#FDAF19;--sunflower-tint:#FEDC9C;--sunflower-confection:#1A7277;--sunflower-confection-tint:#9CC2C4}

/* ---- Rye style button: bordered label + offset duplicate shape, circle fills on hover */
.rbtn{display:inline-block;position:relative;padding:0 5px 5px 0;font:700 15px/1.25 var(--sans);text-transform:uppercase;color:var(--bc,var(--accent));background:none;border:0;cursor:pointer;text-align:left;vertical-align:top}
.rbtn::before{content:"";position:absolute;left:5px;top:5px;right:0;bottom:0;border:1px solid currentColor;background:var(--sh,var(--canvas))}
.rbtn .rl{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 18px;border:1px solid currentColor;background:var(--bg,var(--canvas));overflow:hidden;transition:color .35s var(--ease)}
.rbtn .rc{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border-radius:50%;background:var(--bc,var(--accent));transform:translate(-50%,-50%) scale(0);transition:transform .55s var(--ease)}
.rbtn .rt,.rbtn .arr{position:relative}
.rbtn .arr{display:block;width:26px;height:1px;background:currentColor;flex:none}
.rbtn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.rbtn:hover .rc,.rbtn:focus-visible .rc{transform:translate(-50%,-50%) scale(1.02)}
.rbtn:hover .rl,.rbtn:focus-visible .rl{color:var(--hc,#fff)}
.rbtn.fill .rl{background:var(--bc,var(--accent));color:#fff}
.rbtn.fill .rc{background:var(--canvas)}
.rbtn.fill:hover .rl,.rbtn.fill:focus-visible .rl{color:var(--bc,var(--accent))}
.rbtn.light{--bc:#fff;--bg:transparent;--sh:rgba(255,255,255,.2);--hc:var(--ink)}
.rbtn.light::before{backdrop-filter:blur(2px)}
.rbtn.onc{--bc:var(--ink)}.rbtn.onc::before{background:rgba(255,255,255,.2);border-color:var(--ink)}
.rbtn.sq .rl{padding:13px 18px}.rbtn.sq .arr{width:34px}
.rbtn.prev .arr{transform:scaleX(-1)}
.rbtn.wide{display:block}.rbtn.wide .rl{padding:13px 18px}
@media (pointer:coarse){.rbtn .rl{min-height:44px}}
.chip{box-shadow:4px 4px 0 -1px var(--panel),4px 4px 0 0 var(--ink-2)}
.chip[aria-pressed=true]{box-shadow:4px 4px 0 -1px var(--panel),4px 4px 0 0 var(--accent)}
.lp .rbtn{align-self:flex-start}

/* ---- colour transition pane */
.pane{position:fixed;inset:0;z-index:200;background:var(--pane,var(--accent));transform:translateY(101%);pointer-events:none}
html.pane-in .pane{transform:translateY(0)}
.pane.cover{transform:translateY(0);transition:transform .5s var(--ease-io)}
html.pane-in .pane.out,.pane.out{transform:translateY(-101%);transition:transform .65s var(--ease-io)}

/* ---- home hero (giant word, bag, slide info) */
.rhero{position:relative;padding:118px 0 clamp(30px,4vw,60px);overflow:hidden}
.rhero .word{font-size:clamp(70px,19.2vw,400px);line-height:.82;letter-spacing:-.045em;font-weight:400;white-space:nowrap;margin-left:-.04em;will-change:transform}
.rgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:30px;align-items:end;margin-top:clamp(-150px,-9vw,-40px);position:relative}
.rhero .left h1{font-size:clamp(26px,3.3vw,56px);font-weight:400;margin-bottom:14px}
.rhero .left p{font-size:clamp(16px,1.25vw,20px);max-width:34ch;margin-bottom:22px}
.rhero .bags{position:relative;aspect-ratio:648/900;max-height:74vh;justify-self:center;width:100%;will-change:transform}
.rhero .hb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(30px) rotate(3deg);transition:opacity .5s var(--ease),transform .7s var(--ease);filter:drop-shadow(0 30px 34px rgba(19,19,19,.22))}
.rhero .hb.on{opacity:1;transform:none}
.rhero .right{position:relative;justify-self:end;width:min(100%,330px);min-height:230px}
.rhero .hs{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .4s}
.rhero .hs.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.rhero .hn{font:500 clamp(24px,2.2vw,32px)/1.1 var(--sans);text-transform:uppercase}
.rhero .hm{font:400 clamp(15px,1.2vw,18px)/1.4 var(--sans);text-transform:uppercase;margin:6px 0 20px;color:var(--ink-2)}
.rhero .ctrl{position:absolute;right:0;bottom:0;display:flex;gap:8px}
.rhero .motif{position:absolute}
@media (max-width:860px){.rgrid{grid-template-columns:1fr;margin-top:10px}.rhero .bags{max-height:52vh;order:-1}.rhero .right{justify-self:start;min-height:190px}}

/* ---- portfolio split cards */
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pfc{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);min-height:clamp(240px,30vw,470px);position:relative}
.pfc .txt{padding:clamp(18px,2.6vw,40px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.pfc h3{font:500 clamp(24px,3vw,44px)/1.05 var(--sans);text-transform:uppercase}
.pfc p{margin-top:10px;font-size:clamp(15px,1.2vw,18px);max-width:26ch}
.pfc .rbtn{margin-top:auto;align-self:flex-start}
.pfc .txt::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pfc:hover .txt::after{transform:scaleX(1)}
.pfc .ph{overflow:hidden;position:relative}
.pfc .ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transition:scale .9s var(--ease);will-change:transform}
.pfc:hover .ph img{scale:1.05}
@media (max-width:900px){.pfgrid{grid-template-columns:1fr}}
@media (max-width:520px){.pfc{grid-template-columns:1fr}.pfc .ph{min-height:200px}}

/* ---- video sections */
.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-dark{position:relative;color:#fff;overflow:hidden;background:#20301c}
.hero-dark .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,8,.5) 0,rgba(8,14,8,.25) 40%,rgba(8,14,8,.62) 100%)}
.hero-dark .in{position:relative}
.vband{padding:clamp(70px,10vw,150px) 0}
.vfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,4vw,60px);max-width:980px}
.vfacts div{padding:0 26px;border-left:1px solid rgba(255,255,255,.5)}
.vfacts b{display:block;font:300 clamp(34px,4.4vw,64px)/1 var(--mono);letter-spacing:-.04em}
.vfacts span{display:block;margin-top:8px;font-size:15px;max-width:22ch}
@media (max-width:640px){.vfacts{grid-template-columns:1fr;gap:22px}}
.vhero{height:auto;min-height:min(86vh,820px);display:flex;align-items:flex-end;padding:150px 0 clamp(40px,5vw,80px)}
.vhero .in{width:100%}
.vhero h1{font-size:clamp(64px,17vw,330px);line-height:.86;font-weight:400;letter-spacing:-.045em;will-change:transform}
.vhero .lead{margin-top:20px;max-width:62ch}
.vhero .crumb{color:rgba(255,255,255,.85)}

/* ---- about photo with parallax */
.about-photo{overflow:hidden;position:relative}
.about-photo .inner{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}

/* ---- falling plant pieces (cards and variety hero) */
.card .box{background:linear-gradient(180deg,var(--t) 0 54%,var(--canvas) 54% 100%)}
.pcs{position:absolute;inset:0;overflow:hidden;background:var(--t);opacity:0;transition:opacity .3s var(--ease)}
.pc{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;fill:var(--cc);transform:translateY(-320%) rotate(calc(var(--r) - 50deg));transition:transform .45s var(--ease-io)}
.card:hover .pcs,.card:focus-visible .pcs{opacity:1}
.card:hover .pc,.card:focus-visible .pc{transform:rotate(var(--r));transition:transform .8s cubic-bezier(.3,1.45,.45,1) var(--d)}
.card .sil{display:none}
.card img{z-index:1}.card .badge{z-index:2}
@media (hover:none){.card .pcs{opacity:1}.card .pc{transform:rotate(var(--r))}.card .lines{display:none}}

/* ---- variety page (Rye product layout) */
.vp{padding-top:118px;overflow:hidden}
.vname{font-size:clamp(60px,17.5vw,360px);line-height:.84;font-weight:400;letter-spacing:-.045em;white-space:nowrap;will-change:transform}
.vgrid{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,4.4fr) minmax(0,3.4fr);gap:clamp(20px,3vw,50px);margin-top:clamp(-120px,-7vw,-30px);align-items:start}
.vl{padding-top:clamp(120px,10vw,190px)}
.vseg{font-size:clamp(26px,3.2vw,52px);font-weight:400;margin-bottom:26px}
.vspecs{display:grid;gap:16px}
.vspecs li{display:flex;gap:14px;align-items:center}
.vspecs img{width:46px;height:46px;flex:none}
.vspecs b{display:block;font:500 clamp(16px,1.3vw,20px)/1.25 var(--sans)}
.vspecs span{display:block;color:var(--ink-2);font-size:clamp(15px,1.2vw,18px);text-transform:lowercase}
.vbag{position:relative;aspect-ratio:648/900;will-change:transform}
.vstage{position:absolute;left:-12%;right:-12%;top:20%;bottom:16%;overflow:hidden;background:var(--t)}
.vstage .pcs{opacity:1}
.vstage .pc{animation:drop .9s cubic-bezier(.3,1.45,.45,1) both;animation-delay:calc(var(--d) + .5s);transform:rotate(var(--r))}
@keyframes drop{from{transform:translateY(-340%) rotate(calc(var(--r) - 50deg))}to{transform:rotate(var(--r))}}
.vbag img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(19,19,19,.25))}
.vr{position:relative;z-index:1;padding-top:clamp(130px,13vw,250px);display:grid;gap:16px}
.vr .tags{display:flex;gap:8px;flex-wrap:wrap}
.vr .tags span{font:500 12px/1 var(--sans);text-transform:uppercase;padding:7px 9px}
.vr .tags .o{border:1px solid var(--ink)}
@media (max-width:900px){.vgrid{grid-template-columns:1fr;margin-top:10px}.vl,.vr{padding-top:0}.vbag{max-width:420px;margin:0 auto;order:-1;width:100%}}
.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--panel);margin-bottom:20px;min-height:clamp(240px,26vw,420px)}
.story.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.story.flip .ph{order:2}
.story .ph{position:relative;overflow:hidden;min-height:240px;background:var(--t)}
.story .ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.story .txt{padding:clamp(22px,4vw,64px);display:grid;gap:16px;align-content:center}
@media (max-width:760px){.story,.story.flip{grid-template-columns:1fr}.story.flip .ph{order:0}}

@media (prefers-reduced-motion:reduce){
  .pane{display:none}.pc,.card:hover .pc{transform:rotate(var(--r));transition:none}.vstage .pc{animation:none}
  .rbtn .rc{transition:none}[data-par]{transform:none!important}
}