/* Network and Your invitation: six photos each, slow crossfade (driven by photo-cycle.js).
   Only opacity changes; every photo is 3:2 so nothing shifts between them. */
.cycle{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.cycle img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover;opacity:0;transition:opacity 1.8s ease-in-out;backface-visibility:hidden}
.cycle img.on{opacity:1}
.cycle.run img{will-change:opacity}
.letter figure.cyc-fig{aspect-ratio:auto;overflow:visible;align-self:start}
@media (prefers-reduced-motion:reduce){.cycle img{transition:none}}
.letter figure.cyc-fig{width:100%}
/* same proportions as The network: text 5 parts, photo 6 parts */
@media (min-width:901px){#letter.letter{grid-template-columns:minmax(0,5fr) minmax(0,6fr);justify-content:normal}}
/* controls under each photo set: a line per photo on the left, back / next on the right */
.cyc-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.cyc-dots{display:flex}
.cyc-dot{background:none;border:0;padding:14px 4px;cursor:pointer;line-height:0}
.cyc-dot i{display:block;width:26px;height:1px;background:currentColor;opacity:.3;transition:opacity .4s ease}
.cyc-dot:hover i{opacity:.6}
.cyc-dot.on i{opacity:1}
.cyc-arrows{display:flex;gap:8px}
.cyc-arrows button{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent);color:inherit;cursor:pointer;transition:border-color .3s ease,color .3s ease}
.cyc-arrows button:hover{border-color:var(--tan);color:var(--tan)}
.cyc-arrows svg{width:18px;height:10px}
.cyc-prev svg{transform:scaleX(-1)}
.cyc-nav{color:var(--navy)}
[data-tone=tan] .cyc-nav{color:var(--deep-ink,#1F3447)}
.cyc-dot:focus-visible,.cyc-arrows button:focus-visible{outline:1px solid var(--tan);outline-offset:2px}
/* Your invitation headline: two lines like the other sections - Castoro italic, then thin Outfit */
#letter h2.lines{font-family:"Outfit",sans-serif;font-weight:200;font-size:clamp(38px,3.8vw,64px);line-height:1.04;letter-spacing:-.025em}
#letter h2.lines b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* The events photo uses the same crossfade (four photos) instead of its old two-photo CSS loop */
.fade-imgs.cycle img{animation:none}