/* Projects (patterns/du-an-*.php, templates single-du_an + taxonomy-kieu_website). Loaded only on pages with a block of class "pj". */
.pj{--pj-hero-h:460px;--pj-stage:200px;--pj-stage-l:300px;padding-inline:var(--s-4)}
.pj__page{max-width:var(--page);margin-inline:auto}
.pj__page > *{margin:0}

/* heading + counters */
.pj-head{padding-top:var(--s-6)}
.pj-head__text{display:grid;gap:var(--gap-text);max-width:var(--measure)}
.pj-head__text > *{margin:0}
.pj-head__title{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.pj-head__title strong{font-weight:inherit;color:var(--accent)}
.pj-head__lede{font-size:var(--t-l);color:var(--ink-2)}
.pj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);margin-top:var(--gap-head);border-block:1px solid var(--rule);padding-block:var(--s-5)}
.pj-stats > *{margin:0;padding-inline:var(--s-5);border-left:1px solid var(--rule)}
.pj-stats > :first-child{border-left:0;padding-left:0}

/* featured project: the frame grows from 92% to 100% as it scrolls in (CSS view timeline; plain in other browsers) */
.pj-hero{padding-top:var(--gap-head)}
.pj-hero__list{display:grid;gap:var(--gap-stack);margin:0;padding:0;list-style:none}
.pj-hero__list > li{margin:0;display:grid;gap:var(--gap-stack)}
.pj-hero__list > li > *{margin:0}
.pj-hero__expand{--dg-site-w:620px;position:relative;height:var(--pj-hero-h);overflow:hidden;padding:var(--s-7) var(--s-6) 0;border:1px solid var(--rule);border-radius:var(--r-card);background-color:var(--paper-2);background-image:radial-gradient(circle, var(--dotc) 1px, transparent 1.5px);background-size:var(--dotgrid-size) var(--dotgrid-size);transform-origin:50% 100%;animation:pj-expand linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
@keyframes pj-expand{from{transform:scale(.92)}to{transform:none}}
.pj-hero__expand::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent, var(--paper-2));pointer-events:none}
.pj-hero__expand .dg-mock__stage{align-items:flex-end}
.pj-hero__expand .dg-phone{margin-bottom:calc(var(--s-7) * -1)}
.pj-hero__cap{gap:var(--gap-grid)}
.pj-hero__cap > *{margin:0}
.pj-hero__text{display:grid;gap:var(--s-2);min-width:0}
.pj-hero__text > *{margin:0}
.pj-hero__tag{font-size:var(--t-2xs)}
.pj-hero__tag a{color:inherit;text-decoration:none}
.pj-hero__name{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em}
.pj-hero__name a{color:inherit;text-decoration:none}
.pj-hero__desc{color:var(--ink-2);font-size:var(--t-s);max-width:var(--measure)}
.pj-hero__cap .pj-hero__go{display:inline-flex;width:auto;margin:0;align-items:center;gap:var(--s-2);min-height:var(--ctl);padding:0 var(--s-5);border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);text-decoration:none;font:600 var(--t-s)/1 var(--font-body);transition:border-color var(--dur) var(--ease-out)}
.pj-hero__cap .pj-hero__go:hover{border-color:var(--ink-2)}
.pj-hero__cap .pj-hero__go::after{content:"";width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/arrow.svg) center / contain no-repeat;mask:url(../../../icons/arrow.svg) center / contain no-repeat;transition:transform var(--dur) var(--ease-press)}
.pj-hero__cap .pj-hero__go:hover::after{transform:translate(2px,-2px)}

/* filter + grid */
.pj-list{padding-top:var(--gap-head)}
.pj-list .pj__page{display:grid;gap:var(--gap-grid)}
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);grid-auto-flow:dense;margin:0;padding:0;list-style:none}
.pj-grid > li{margin:0;min-width:0;display:grid}
.pj-grid > li.is-wide{grid-column:span 2}
.pj-grid--rel > li.is-wide{grid-column:auto}
.pj-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);overflow:hidden;transition:transform var(--dur-m) var(--ease-out),border-color var(--dur-m) var(--ease-out)}
.pj-card:hover{transform:translateY(-3px);border-color:var(--ink-3)}
.pj-card > *{margin:0;min-width:0}
.pj-stage{--dg-site-w:380px;position:relative;height:var(--pj-stage);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:var(--s-5) var(--s-5) 0;background:color-mix(in oklch, var(--pc, var(--accent-fill)) 9%, var(--paper-2))} /* small card: the window top shows, the bottom is cropped */
.is-wide .pj-stage{--dg-site-w:520px;height:var(--pj-stage-l)}
.pj-grid--rel .is-wide .pj-stage{--dg-site-w:380px;height:calc(var(--pj-stage) - var(--s-7))}
.pj-grid--rel .pj-stage{height:calc(var(--pj-stage) - var(--s-7))}
.pj-stage .dg-mock{width:100%}
.pj-stage .dg-site{transition:transform var(--dur-morph) var(--ease-out)}
.pj-card:hover .pj-stage .dg-site{transform:translateY(calc(var(--s-2) * -1))}
.pj-body{display:grid;gap:var(--s-2);padding:var(--gap-card-s);align-content:start}
.pj-body > *{margin:0;min-width:0}
.pj-body__kind{gap:var(--s-2);font-size:var(--t-2xs)}
.pj-body__kind > *{margin:0}
.pj-body__kind a{color:inherit;text-decoration:none}
.pj-body__kind > p::before{content:"·";margin-right:var(--s-2)}
.pj-body__name{font-size:var(--t-l);font-weight:700;letter-spacing:-0.01em}
.pj-body__name a{color:inherit;text-decoration:none}
.pj-body__name a::after{content:"";position:absolute;inset:0;z-index:1} /* the whole card is the link */
.pj-body__desc{color:var(--ink-2);font-size:var(--t-s);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pj-body .dg-mlist--chips{margin-top:var(--s-1)}
.pj-empty{padding:var(--gap-card);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2);text-align:center}

/* project page */
.pj-detail{padding-top:var(--s-6)}
.pj-detail__page{display:grid;gap:var(--gap-head)}
.pj-crumb{gap:var(--s-2);color:var(--ink-3);font-size:var(--t-xs)}
.pj-crumb > *{margin:0}
.pj-crumb a{color:var(--ink-2);text-decoration:none}
.pj-crumb a:hover{color:var(--accent)}
.pj-crumb > * + *::before{content:"›";margin-right:var(--s-2);color:var(--ink-3)}
.pj-detail__head{display:grid;gap:var(--s-3)}
.pj-detail__head > *{margin:0}
.pj-detail__title{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.pj-meta{gap:var(--s-2)}
.pj-meta > *{margin:0}
.pj-meta__item,.pj-meta__item a{display:inline-flex;align-items:center;min-height:var(--s-6);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);font:500 var(--t-xs)/1 var(--font-mono);color:var(--ink-2);text-decoration:none}
.pj-meta__item.wp-block-post-terms{border:0;padding:0}
.pj-detail__stage{--dg-site-w:720px;--dg-phone-w:260px;position:relative;min-height:420px;display:grid;align-content:start;gap:var(--s-4);padding:var(--s-5) var(--s-6) 0;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background-color:var(--paper-2);background-image:radial-gradient(circle, var(--dotc) 1px, transparent 1.5px);background-size:var(--dotgrid-size) var(--dotgrid-size)}
.pj-detail__stage .dg-mock__stage[data-show="phone"]{padding-bottom:var(--s-7)}
.pj-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap-col);align-items:start}
.pj-two > *{margin:0}
.pj-sec{display:grid;gap:var(--gap-text);align-content:start}
.pj-sec > *{margin:0}
.pj-sec__h{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em}
.pj-sec__h + .pj-sec__h,.pj-sec .dg-mlist + .pj-sec__h,.pj-sec .wp-block-post-content + .pj-sec__h{margin-top:var(--s-4)}
.pj-sec__lede{color:var(--ink-2)}
.pj-sec .wp-block-post-content > *{margin:0 0 var(--gap-text)}
.pj-cta{display:grid;gap:var(--s-3);margin-top:var(--s-4);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.pj-cta > *{margin:0}
.pj-cta__h{font-size:var(--t-l);font-weight:700}
.pj-cta__p{color:var(--ink-2);font-size:var(--t-s)}
.pj-cta__btns{gap:var(--s-2)}
.pj-cta__btns .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}
.pj-rel{display:grid;gap:var(--gap-grid)}
.pj-rel > *{margin:0}
.pj-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
.pj-pn > *{margin:0}
.pj-pn > :empty{display:none}
.pj-pn a{display:grid;gap:var(--s-1);padding:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);text-decoration:none;color:inherit;font:600 var(--t-s)/1.3 var(--font-body);transition:border-color var(--dur) var(--ease-press)}
.pj-pn a:hover{border-color:var(--ink-2)}
.pj-pn .pj-pn__next{text-align:right}
.pj-pn .post-navigation-link__label{display:block;font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* type page */
.pj-tax{padding-top:var(--s-6)}
.pj-tax .pj__page{display:grid;gap:var(--gap-text)}
.pj-tax .pj-query{margin-top:var(--gap-head)}

@media (max-width: 1023px){
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 767px){
  .pj-head{padding-top:var(--s-4)}
  .pj-stats{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .pj-stats > *{border-left:0;padding-inline:0}
  .pj-hero__expand{--pj-hero-h:360px;padding:var(--s-5) var(--s-4) 0}
  .pj-hero__expand .dg-phone{display:none}
  .pj-grid{grid-template-columns:minmax(0,1fr)}
  .pj-grid > li.is-wide{grid-column:auto}
  .is-wide .pj-stage{height:var(--pj-stage)}
  .pj-detail__stage{min-height:340px;padding:var(--s-5) var(--s-4) 0}
  .pj-pn{grid-template-columns:minmax(0,1fr)}
  .pj-pn .pj-pn__next{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .pj-hero__expand{animation:none}
  .pj-card,.pj-stage .dg-site{transition:none}
}