/* Page-level layout for the anarrustamli.com redesign. Components carry their own
   styling (components/ar-*.css); this file only composes pages. */
.pg{min-height:100%;background:var(--background);color:var(--foreground)}
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--container-narrow)}
.wrap--prose{max-width:var(--container-prose)}
.sec{padding-block:var(--section-y);border-top:1px solid var(--border)}
.sec--tight{padding-block:var(--section-y-tight)}
.sec--sunken{background:var(--surface-sunken)}
.sec--flush{border-top:0}
.sec--inv{background:var(--surface-inverted);color:var(--surface-inverted-foreground);border-top:0}
.sec--inv .ar-eyebrow,.sec--inv .ar-secthead__lede,.sec--inv .muted{color:color-mix(in oklab,var(--surface-inverted-foreground) 60%,transparent)}
.sec--inv .ar-secthead__title{color:var(--surface-inverted-foreground)}
.stack{display:grid;gap:var(--stack-block)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.muted{color:var(--muted-foreground)}
.rise{animation:ar-rise var(--duration-slow) var(--ease-out) both}

/* downloadable resources */
.ar-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.ar-resource-card{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.ar-resource-card .ar-card__body{flex:1;gap:var(--space-5)}
.ar-resource-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.ar-resource-card__number{font-size:var(--text-meta);letter-spacing:.18em;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.ar-resource-card .ar-card__title{font-size:clamp(1.4rem,2vw,2rem);line-height:var(--leading-snug)}
.ar-resource-card .ar-card__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:auto;font-size:var(--text-meta)}
.ar-resource-card .ar-arrowlink{pointer-events:none}
.ar-download{margin-block:var(--space-8);padding:var(--space-6);border:1px solid var(--border);border-left:3px solid var(--anar-red);border-radius:var(--radius-md);background:var(--surface-sunken)}
.ar-download p{margin:0}
.ar-download p+p{margin-top:var(--space-3)}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:var(--glass-fill);backdrop-filter:var(--blur-header);-webkit-backdrop-filter:var(--blur-header);border-bottom:1px solid var(--border)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);height:var(--nav-h);max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.hdr__right{display:flex;align-items:center;gap:var(--space-2)}
.hdr__burger{display:none}
.skiplink{position:absolute;left:-9999px;top:8px;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-meta);z-index:70}
.skiplink:focus{left:12px}

/* hero */
.hero{padding-block:clamp(48px,6vw,96px)}
.hero__grid{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:34px 34px;background-position:center}
.hero__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__title{margin-top:var(--space-5);font-size:var(--text-hero);font-weight:var(--weight-bold);letter-spacing:var(--tracking-hero);line-height:var(--leading-tight);color:var(--heading)}
.hero__title .ar-dot{background:var(--anar-red)}
.hero__lede{margin-top:var(--space-6);max-width:54ch;font-size:var(--text-body-xl);line-height:var(--leading-relaxed);color:var(--muted-foreground)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__strap{display:flex;gap:var(--space-3);margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--border);max-width:56ch;font-size:var(--text-support);line-height:var(--leading-relaxed);color:var(--muted-foreground)}
.hero__media{position:relative;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--muted);box-shadow:var(--shadow-lg)}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;display:block}

/* page header */
.phead{padding-block:var(--section-y-tight);border-bottom:1px solid var(--border)}
.phead__title{margin-top:var(--space-4);font-size:var(--text-page-title);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug)}
.phead__lede{margin-top:var(--space-5);max-width:64ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--muted-foreground)}
.phead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}

/* lists + bordered rows */
.rows{display:grid}
.row-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-5);padding:var(--space-5) 0;border-top:1px solid var(--border);text-decoration:none;color:inherit;transition:var(--transition-colors)}
.row-item:last-child{border-bottom:1px solid var(--border)}
.row-item:hover{text-decoration:none}
.row-item:hover .row-item__title{color:var(--anar-red)}
.row-item:hover .ar-icon--nudge{transform:translateX(var(--translate-nudge))}
.row-item__no{font-family:var(--font-editorial);font-size:var(--text-meta);color:var(--anar-red);width:24px}
.row-item__title{font-size:var(--text-card-title);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);transition:var(--transition-colors)}
.row-item__line{margin-top:4px;font-size:var(--text-support);color:var(--muted-foreground)}
.checklist{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-support);line-height:var(--leading-relaxed);color:var(--muted-foreground)}
.checklist .ar-icon{margin-top:3px;color:var(--anar-red)}
.taglist{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* skills */
.skills{display:grid;gap:var(--space-5)}
.skill__row{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-support);margin-bottom:var(--space-2)}
.skill__val{font-family:var(--font-editorial);color:var(--muted-foreground)}
.skill__track{height:3px;background:var(--muted);border-radius:var(--radius-full);overflow:hidden}
.skill__fill{height:100%;background:var(--anar-red);border-radius:var(--radius-full)}

/* article */
.article-head{max-width:var(--container-narrow)}
.article-head__title{margin-top:var(--space-5);font-family:var(--font-serif);font-weight:400;font-size:var(--text-page-title);letter-spacing:-.015em;line-height:1.1}
.article-head__deck{margin-top:var(--space-5);max-width:60ch;font-size:var(--text-body-xl);line-height:var(--leading-relaxed);color:var(--muted-foreground)}
.article-head__meta{margin-top:var(--space-7)}
.article-hero-media{margin:var(--space-10) 0 var(--section-y-tight);overflow:hidden;border-radius:var(--radius-card);background:var(--surface-sunken)}
.article-hero-media img{width:100%;height:100%;object-fit:cover}
.art{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(32px,5vw,72px);align-items:start;min-width:0}
.art__body{width:100%;min-width:0;max-width:var(--container-prose);margin-inline:auto}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:2px;max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;padding-right:var(--space-2)}
.toc__title{margin-bottom:var(--space-3);font-family:var(--font-editorial);font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--muted-foreground)}
.toc__link{display:block;padding:7px 0 7px 14px;border-left:1px solid var(--border);font-size:var(--text-meta);line-height:1.35;color:var(--muted-foreground);text-decoration:none}
.toc__link:hover{color:var(--foreground);text-decoration:none}
.toc__link--on{border-color:var(--anar-red);color:var(--heading)}
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-meta);color:var(--muted-foreground)}
.dot{width:3px;height:3px;border-radius:var(--radius-full);background:var(--border-strong)}

/* sticky metadata panel (project detail) */
.mpanel{position:sticky;top:calc(var(--nav-h) + 24px);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-p)}
.mrow{display:flex;justify-content:space-between;gap:var(--space-4);padding:10px 0;border-bottom:1px solid var(--border);font-size:var(--text-support)}
.mrow:last-child{border-bottom:0}
.slot{border:1px dashed var(--border-heavy);border-radius:var(--radius-sm);padding:2px 8px;font-family:var(--font-editorial);font-size:var(--text-micro);color:var(--muted-foreground)}

/* footer */
.ftr{border-top:1px solid var(--border);background:var(--surface-sunken)}
.ftr__in{max-width:var(--container-max);margin-inline:auto;padding:var(--section-y-tight) var(--gutter) var(--space-8)}
.ftr__top{display:grid;grid-template-columns:1.45fr .85fr 1.05fr 1.2fr .85fr;gap:var(--space-8)}
.ftr__h{margin-bottom:var(--space-4);font-family:var(--font-editorial);font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--muted-foreground)}
.ftr__list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ftr__list a{font-size:var(--text-support);color:var(--muted-foreground);text-decoration:none}
.ftr__list a:hover{color:var(--foreground);text-decoration:none}
.ftr__social-list{gap:var(--space-2)}
.ftr__social-link{display:inline-flex;align-items:center;gap:var(--space-3);width:max-content}
.ftr__social-link .ar-iconbtn{flex:0 0 auto;border-color:var(--border);background:var(--background);color:var(--foreground)}
.ftr__social-link:hover .ar-iconbtn{border-color:var(--border-strong);background:var(--accent)}
.ftr__social-link img{width:18px;height:18px}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--section-y-tight);padding-top:var(--space-6);border-top:1px solid var(--border);font-size:var(--text-meta);color:var(--muted-foreground)}
.socials{display:flex;gap:var(--space-1)}

/* CMS category names can be wider than a phone viewport. */
.ar-tabs{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.ar-tabs>.ar-tab{flex:0 0 auto}

/* responsive */
@media (max-width:1024px){
  .hdr__nav,.desktop-nav{display:none!important}
  .mobile-nav{display:block}
  .hdr__burger{display:inline-grid}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art{grid-template-columns:1fr}
  .toc{display:none}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:var(--space-10)}
  .split,.split--wide{grid-template-columns:1fr;gap:var(--space-10)}
  .hero__media{max-width:520px}
}
@media (max-width:640px){
  .grid3,.grid2,.ar-resource-grid{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:var(--space-8)}
  .row-item{grid-template-columns:auto 1fr;gap:var(--space-4)}
  .phead__row{gap:var(--space-5)}
  .article-head__title{font-size:clamp(2.35rem,12vw,3.65rem);line-height:1.04}
  .article-head__deck{font-size:var(--text-body-lg)}
  .article-head__meta{gap:var(--space-2)}
  .article-hero-media{margin-top:var(--space-8);margin-inline:calc(var(--gutter) * -.45);border-radius:var(--radius-md)}
}