.frag svg{width:25px;height:25px;flex:none;color:#d7c49d}.frag{display:grid;grid-template-columns:28px 1fr;gap:4px 10px}.frag svg{grid-row:span 2}.frag span{grid-column:2}.hero .lead{max-width:44em}/* Project collection: balanced image-led cards with the 21st Spotlight pattern. */
#index .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
#index .tile a{padding:0;overflow:hidden;border-radius:22px;gap:0;position:relative;background:var(--card)}
#index .tile-visual{border-radius:0;aspect-ratio:16/9;min-height:0}
#index .tile-body{padding:24px;margin:0;gap:16px;display:flex;flex-direction:column;flex:1}
#index .tile strong{font-size:clamp(22px,2.2vw,29px)}
#index .tile-top{margin:0}#index .tile-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
#index .tile a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.learning-panel{margin-top:28px}.certificate-ribbon{height:clamp(210px,32vw,420px);position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#fffaf0,transparent 70%);direction:ltr}
.ribbon-camera{position:absolute;inset:0;perspective-origin:50% 50%;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ribbon-tile{position:absolute;transform-style:preserve-3d}.ribbon-facet{position:absolute;top:0;background-repeat:no-repeat;backface-visibility:hidden}
.paused .ribbon-tile,.offscreen .ribbon-tile,.tab-hidden .ribbon-tile{animation-play-state:paused!important}
.ribbon-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0 25px;border-bottom:1px solid var(--line);font-size:14px}
.ribbon-toolbar button,.learning-arrows button,.certificate-open{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:9px 16px;color:var(--text);background:var(--card);cursor:pointer}
.learning-browser{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:36px 0}.learning-select label{display:block;font-size:17px;margin-bottom:12px;font-weight:700}.learning-select select{font:inherit;font-size:15px;width:100%;min-height:52px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:12px;white-space:normal}.learning-select{min-width:0}.learning-arrows{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:14px}.learning-detail{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:18px;min-width:0;box-shadow:0 16px 40px -30px #403923}.learning-detail h3{font-size:clamp(23px,3vw,32px);line-height:1.5;margin:12px 0;overflow-wrap:anywhere}.learning-detail .cert-line{font-size:16px}.certificate-open{margin-top:16px;background:var(--ink);color:var(--sand)}
#certs #skills{padding:32px 0 0;background:transparent;border-top:1px solid var(--line)}#certs #skills h2{font-size:30px}#certs .skill-map{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#certs .skill-map li{padding:18px;border:1px solid var(--line);border-radius:12px;background:transparent}
#certs [hidden]{display:none!important}
@media(max-width:700px){#index .tiles{grid-template-columns:1fr;gap:22px}#index .tile-body{padding:20px}.learning-browser{grid-template-columns:1fr;gap:22px;padding:24px 0}.learning-detail{padding:22px}.ribbon-toolbar{font-size:13px}#certs .skill-map{grid-template-columns:1fr}.certificate-ribbon{margin-inline:-16px}}
@media(prefers-reduced-motion:reduce){.ribbon-tile{animation-play-state:paused!important}}
/* Mixed moving cards: the certificates and skills share the same gallery. */
.credential-gallery{margin-top:32px}.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:15px}.gallery-pause{font:inherit;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer}
.gallery-rows{display:grid;gap:18px;margin-inline:calc(-1 * var(--gutter));overflow:hidden}.credential-lane{overflow-x:auto;scrollbar-width:none;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.credential-lane::-webkit-scrollbar{display:none}.credential-track{display:flex;width:max-content;animation:credentials-drift 160s linear infinite}.credential-group{display:flex;gap:18px;padding-right:18px}.credential-lane:nth-child(2) .credential-track{animation-direction:reverse;animation-duration:175s}
.credential-card{width:260px;height:260px;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;position:relative;background:var(--card);color:var(--text);text-align:right;direction:rtl;font:inherit;padding:0;cursor:pointer;flex:none;transition:box-shadow .25s,border-color .25s}
.credential-card:hover{border-color:var(--accent);box-shadow:0 10px 25px -16px var(--ink)}.credential-card:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}.credential-card>img{height:148px;width:100%;object-fit:contain;background:#fff;padding:10px}.credential-caption{display:flex;flex-direction:column;gap:7px;padding:16px;min-height:0}.credential-caption small{font-size:12px;color:var(--muted)}.credential-caption strong{font-size:16px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.credential-mark{height:132px;display:grid;place-items:center;font-size:32px;font-weight:700;background:var(--ink);color:var(--sand)}.skill-tile{background:var(--ink-2);color:var(--sand);justify-content:space-between;border-color:var(--ink-line)}.skill-tile:nth-child(4n){background:var(--accent)}.skill-tile small{color:var(--sand)}.skill-tile .credential-caption strong{font-size:24px}.skill-card-icon{padding:24px 20px 0}.skill-card-icon svg{width:36px;height:36px}.skill-card-link{font-size:13px;margin-top:10px}.gallery-hint{font-size:13px;color:var(--muted);text-align:center;margin-top:24px}
.paused .credential-track,.offscreen .credential-track,.tab-hidden .credential-track,.credential-lane:hover .credential-track,.credential-lane:focus-within .credential-track{animation-play-state:paused}
.credential-info{padding:20px;max-width:760px;direction:rtl}.credential-info h3{font-size:24px;line-height:1.6}.credential-info .cert-line{font-size:16px}.cert-viewer img[hidden]{display:none}
@keyframes credentials-drift{to{transform:translateX(-50%)}}
@media(max-width:700px){.credential-card{width:220px;height:240px}.credential-card>img{height:130px}.credential-caption{padding:14px}.credential-caption strong{font-size:15px}.skill-tile .credential-caption strong{font-size:21px}.credential-group{gap:12px;padding-right:12px}.gallery-toolbar{font-size:13px}.gallery-rows{gap:12px}}
@media(prefers-reduced-motion:reduce){.credential-track{animation-play-state:paused!important}}
/* Tighter rhythm and consistent interactions across the portfolio. */
.section-head>p{max-width:48em}.ops-preview{overflow:hidden}.chapter{scroll-margin-top:80px}.btn,.filters button{min-height:44px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:700px){.ops-heading h2{font-size:clamp(30px,8vw,42px)}.chapter-text h3{font-size:clamp(30px,8vw,40px)}.section-head{margin-bottom:28px}.cv-item{padding:22px}.tile-idea{line-height:1.9}}
.signature-mark{display:grid;place-items:center;padding:40px var(--gutter);background:var(--ink)}.signature-mark img{width:70px;height:auto;opacity:.9}
/* Full certificate face: no caption consumes the image area. */
.photo-certificate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;background:#fff}
.photo-certificate .credential-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;white-space:nowrap}
.skill-card-icon{padding:22px 20px 0;display:flex}.skill-card-icon svg{width:52px;height:52px;padding:10px;border:1px solid rgb(223 213 188 / .25);border-radius:14px;background:rgb(223 213 188 / .07);transition:transform .3s,background .3s}.skill-tile:hover .skill-card-icon svg{transform:rotate(-6deg);background:rgb(223 213 188 / .15)}
@media(max-width:700px){.photo-certificate>img{height:100%}.skill-card-icon svg{width:48px;height:48px}.signature-mark{padding-block:30px}}