/* r10 (13 Nov 2026): "Making your own film" hub, /learn/your-film/. Option 13: light, rounded, yellow only for actions. */
.sys13 .yf-doors{padding-top:var(--rowgap)}
.sys13 .yf-g{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.sys13 .yf-g{grid-template-columns:repeat(2,minmax(0,1fr))}.sys13 .yf-g3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.sys13 .yf-g3 .yf-sm .im{aspect-ratio:auto;width:100%;height:260px}}
.sys13 .yf-g3{margin-top:var(--gap)}
.sys13 .yf-li{display:flex}
.sys13 .yf-door{position:relative;display:block;width:100%;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);color:#fff;text-decoration:none;background:#111;transition:transform .16s,box-shadow .16s}
.sys13 a.yf-door:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.sys13 .yf-door .im{display:block;aspect-ratio:16/10;overflow:hidden}
.sys13 .yf-sm .im{aspect-ratio:16/9}
.sys13 .yf-door .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.sys13 a.yf-door:hover .im img{transform:scale(1.04)}
.sys13 .yf-door .im::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,.05) 80%)}
.sys13 .yf-door .cn{position:absolute;width:18px;height:18px;border-color:#fff;z-index:2}
.sys13 .yf-door .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,30px);display:grid;gap:6px}
.sys13 .yf-door .k{font:600 12.5px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.sys13 .yf-door .t{font:800 clamp(30px,2.6vw + 14px,48px)/1 var(--f-display);font-stretch:var(--ds);letter-spacing:-.02em}
.sys13 .yf-sm .t{font-size:clamp(24px,1.4vw + 14px,32px)}
.sys13 .yf-door .d{font-size:16px;line-height:1.45;color:var(--on-dark);max-width:46ch}
.sys13 .yf-door .go{justify-self:start;margin-top:6px;background:var(--y);color:#000;font:700 15px var(--f-body);padding:10px 16px;border-radius:var(--pill)}
.sys13 .yf-flag{justify-self:start;margin-top:6px;background:rgba(255,255,255,.16);color:#fff;font:700 13px var(--f-body);letter-spacing:.04em;padding:8px 12px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.4)}
@media (max-width:520px){.sys13 .yf-door .im{aspect-ratio:4/5}.sys13 .yf-sm .im{aspect-ratio:4/3}}
.sys13 .yf-start,.sys13 .yf-also{padding-top:var(--rowgap)}
.sys13 .yf-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:mk}
.sys13 .yf-steps .card{background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);padding:22px 22px 20px;display:flex;flex-direction:column}
.sys13 .yf-steps .k{font:600 12.5px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0}
.sys13 .yf-steps h3{margin:6px 0 8px}
.sys13 .yf-steps p{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.sys13 .yf-steps p:last-child{margin:auto 0 0}
.sys13 .yf-steps a{font-weight:700;color:var(--ink);text-underline-offset:4px}
.sys13 .yf-also-g{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sys13 .yf-also-g a{display:grid;gap:4px;height:100%;padding:18px 20px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);color:var(--ink);text-decoration:none}
.sys13 .yf-also-g a:hover{box-shadow:var(--sh2)}
.sys13 .yf-also-g b{font:800 19px/1.15 var(--f-display);font-stretch:var(--ds)}
.sys13 .yf-also-g span{font-size:15px;line-height:1.45;color:var(--ink2)}
.sys13 .yf-foot{padding-top:24px}
@media (prefers-reduced-motion:reduce){.sys13 .yf-door,.sys13 .yf-door .im img{transition:none}}
.sys13 .yf-door .im picture{display:block;width:100%;height:100%}
/* band on /learn/ and elsewhere: one wide photo card linking to the hub */
.sys13 .yf-band>a{display:grid;gap:0;text-decoration:none;color:var(--ink);background:var(--bg2);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh)}
@media (min-width:800px){.sys13 .yf-band>a{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}}
.sys13 .yf-band .im{display:block;aspect-ratio:16/9;overflow:hidden}
.sys13 .yf-band .im img{width:100%;height:100%;object-fit:cover;display:block}
.sys13 .yf-band .tx{padding:22px clamp(20px,3vw,40px);display:grid;gap:8px}
.sys13 .yf-band .k{font:600 12.5px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.sys13 .yf-band .t{font:800 clamp(24px,2vw + 10px,34px)/1.05 var(--f-display);font-stretch:var(--ds);letter-spacing:-.02em}
.sys13 .yf-band .d{color:var(--ink2);margin:0}
.sys13 .yf-band .go{justify-self:start;background:var(--y);color:#000;font:700 15px var(--f-body);padding:10px 16px;border-radius:var(--pill)}
.sys13 .yf-band>a:hover{box-shadow:var(--sh2)}