/* Austin Creator Brief — site components.
   Built on the foundation tokens in acb.css. Flat, hard-edged, editorial:
   no shadows, no radius (2px max on inputs), crimson only as a marking color. */

*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%;display:block}

/* ---------- bracket device (frame / card scales) ---------- */
.bracket{position:relative}
.bracket--frame{--bk-stroke:var(--bracket-frame-stroke);--bk-arm:var(--bracket-frame-arm);--bk-inset:var(--bracket-frame-inset);--bk-tick-len:var(--bracket-frame-tick-len);--bk-tick-w:var(--bracket-frame-tick-weight);--bk-tick-gap:var(--bracket-frame-tick-gap)}
.bracket--card{--bk-stroke:var(--bracket-card-stroke);--bk-arm:var(--bracket-card-arm);--bk-inset:var(--bracket-card-inset);--bk-tick-len:var(--bracket-card-tick-len);--bk-tick-w:var(--bracket-card-tick-weight);--bk-tick-gap:var(--bracket-card-tick-gap)}
.bracket-inner{position:relative;z-index:1;height:100%;padding:calc(var(--bk-inset) + var(--bk-arm))}
.bracket--flush>.bracket-inner{padding:0}
.bk{position:absolute;width:var(--bk-arm);height:var(--bk-arm);border:0 solid var(--bracket-color);pointer-events:none;z-index:2}
.bracket--inverse .bk{border-color:var(--acb-cream)}
.bk-tl{top:var(--bk-inset);left:var(--bk-inset);border-top-width:var(--bk-stroke);border-left-width:var(--bk-stroke)}
.bk-tr{top:var(--bk-inset);right:var(--bk-inset);border-top-width:var(--bk-stroke);border-right-width:var(--bk-stroke)}
.bk-bl{bottom:var(--bk-inset);left:var(--bk-inset);border-bottom-width:var(--bk-stroke);border-left-width:var(--bk-stroke)}
.bk-br{bottom:var(--bk-inset);right:var(--bk-inset);border-bottom-width:var(--bk-stroke);border-right-width:var(--bk-stroke)}

/* inline bracket mark (18px, no ticks) */
.bkmark{position:relative;display:inline-block;width:var(--bracket-mark-size);height:var(--bracket-mark-size);vertical-align:-0.12em;flex:none;color:var(--acb-crimson)}
.bkmark i{position:absolute;width:var(--bracket-mark-arm);height:var(--bracket-mark-arm);border:0 solid currentColor}
.bkmark i:nth-child(1){top:0;left:0;border-top-width:var(--bracket-mark-stroke);border-left-width:var(--bracket-mark-stroke)}
.bkmark i:nth-child(2){top:0;right:0;border-top-width:var(--bracket-mark-stroke);border-right-width:var(--bracket-mark-stroke)}
.bkmark i:nth-child(3){bottom:0;left:0;border-bottom-width:var(--bracket-mark-stroke);border-left-width:var(--bracket-mark-stroke)}
.bkmark i:nth-child(4){bottom:0;right:0;border-bottom-width:var(--bracket-mark-stroke);border-right-width:var(--bracket-mark-stroke)}

/* hero bracket draw-in — the one permitted decorative motion */
@media (prefers-reduced-motion:no-preference){
  .hero .bk{opacity:0;animation:bk-in .2s cubic-bezier(.2,0,0,1) forwards}
  .hero .bk-tr{animation-delay:.04s}
  .hero .bk-bl{animation-delay:.08s}
  .hero .bk-br{animation-delay:.12s}
  @keyframes bk-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--surface-page);border-bottom:var(--rule-heavy) solid var(--rule-accent)}
.masthead-row{display:flex;align-items:center;gap:var(--space-5);height:64px}
.brand{display:flex;align-items:center;gap:var(--space-2);border-bottom:none;color:var(--text-primary)}
.brand:hover{color:var(--text-primary);border-bottom:none}
.brand-name{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);text-transform:uppercase;font-size:22px;letter-spacing:-0.01em;line-height:1;white-space:nowrap}
.nav{display:flex;gap:var(--space-4);margin-left:auto}
.nav a{font-family:var(--font-body);font-weight:var(--font-weight-medium);font-size:var(--small-size);color:var(--text-primary);border-bottom:none;padding:4px 0}
.nav a:hover{color:var(--acb-crimson)}
.nav a[aria-current="page"]{color:var(--acb-crimson);border-bottom:2px solid var(--acb-crimson)}
.masthead .btn{margin-left:var(--space-2)}
@media (max-width:640px){
  .masthead-row{height:auto;flex-wrap:wrap;padding-block:10px;gap:var(--space-2) var(--space-3)}
  .brand-name{font-size:19px}
  .nav{gap:var(--space-3);margin-left:0;order:3;width:100%}
  .masthead .btn{margin-left:auto;order:2}
}

/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--eyebrow-size);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;line-height:1;padding:14px 22px;background:var(--acb-ink);color:var(--acb-cream);border:none;border-radius:var(--radius-none);cursor:pointer;transition:background-color .12s linear,color .12s linear;text-decoration:none;white-space:nowrap}
a.btn,a.btn:hover{border-bottom:none;color:var(--acb-cream)}
.btn:hover{background:var(--acb-ink-press)}
.btn:active{background:var(--acb-ink-press)}
.btn--crimson{background:var(--acb-crimson)}
.btn--crimson:hover{background:var(--acb-ink)}
.btn--crimson:active{background:var(--acb-crimson-press)}
.btn--ghost{background:transparent;color:var(--acb-ink);border:var(--rule-hairline) solid var(--acb-ink)}
a.btn--ghost,a.btn--ghost:hover{color:var(--acb-ink)}
.btn--ghost:hover{background:var(--acb-bone)}
.btn--ghost:active{background:var(--acb-ash)}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--acb-crimson);outline-offset:2px}
.input{font-family:var(--font-body);font-size:var(--body-size);color:var(--text-primary);background:var(--surface-card);border:var(--rule-hairline) solid var(--acb-ash);border-radius:var(--radius-sm);padding:12px 14px;width:100%}
.input::placeholder{color:var(--text-placeholder)}
.subscribe-form{display:flex;gap:var(--space-2);max-width:460px}
.subscribe-form .input{flex:1;min-width:0}
@media (max-width:640px){.subscribe-form{flex-direction:column}}

/* ---------- layout / sections ---------- */
.section{padding-block:var(--space-9)}
.section--tight{padding-block:var(--space-7)}
.section-head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-6)}
.section-head .rule{flex:1;height:var(--rule-hairline);background:var(--border-hairline);align-self:center}
.eyebrow{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--accent)}
.eyebrow--ink{color:var(--text-primary)}
.eyebrow--muted{color:var(--text-secondary)}
.divider{border:0;border-top:var(--rule-medium) solid var(--border-strong);margin:0}
.measure{max-width:var(--measure-text)}
.arrow-link{font-family:var(--font-body);font-weight:var(--font-weight-medium);font-size:var(--small-size)}

/* ---------- hero ---------- */
.hero{padding-block:var(--space-8)}
.hero .bracket-inner{padding:calc(var(--bracket-frame-inset) + var(--bracket-frame-arm) - 24px)}
.hero-stack{display:grid;gap:var(--space-5);justify-items:center;text-align:center;padding-block:var(--space-6)}
.hero-title{margin:0}
.hero-deck{font-size:var(--body-lg-size);line-height:var(--body-lg-lh);color:var(--text-primary);max-width:560px;margin:0}
.hero-note{color:var(--text-secondary)}
@media (max-width:640px){
  .hero{padding-block:var(--space-6)}
  .hero .bracket-inner{padding:calc(var(--bracket-card-inset) + var(--bracket-card-arm))}
  .hero.bracket--frame{--bk-stroke:var(--bracket-card-stroke);--bk-arm:var(--bracket-card-arm);--bk-inset:var(--bracket-card-inset);--bk-tick-len:var(--bracket-card-tick-len);--bk-tick-w:var(--bracket-card-tick-weight);--bk-tick-gap:var(--bracket-card-tick-gap)}
}

/* ---------- cards ---------- */
.card{background:var(--surface-card);border:var(--rule-hairline) solid var(--border-hairline);padding:var(--space-5)}
.card--sunken{background:var(--surface-sunken)}

/* latest issue */
.issue-card{display:grid;grid-template-columns:1fr 1fr;border:var(--rule-hairline) solid var(--border-hairline);background:var(--surface-card)}
.issue-card>div{padding:var(--space-6)}
.issue-card .issue-meta{border-right:var(--rule-hairline) solid var(--border-hairline);display:grid;gap:var(--space-3);align-content:start}
.issue-no{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--display-m-size);line-height:var(--display-m-lh);letter-spacing:var(--display-m-ls);text-transform:uppercase}
@media (max-width:640px){.issue-card{grid-template-columns:1fr}.issue-card .issue-meta{border-right:none;border-bottom:var(--rule-hairline) solid var(--border-hairline)}}

/* three-up strip */
.three-up{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:1024px){.three-up{grid-template-columns:1fr}}
.three-up .card h3{margin:var(--space-2) 0 var(--space-2)}
.three-up .card p{margin:0 0 var(--space-3);color:var(--text-secondary);font-size:var(--small-size);line-height:var(--small-lh)}

/* archive list */
.archive-row{display:grid;grid-template-columns:110px 1fr auto;gap:var(--space-4);align-items:baseline;padding-block:var(--space-4);border-top:var(--rule-hairline) solid var(--border-hairline)}
.archive-row:last-child{border-bottom:var(--rule-hairline) solid var(--border-hairline)}
.archive-no{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h2-size);text-transform:uppercase;line-height:1}
.archive-title{margin:0 0 var(--space-1);font-weight:var(--font-weight-medium)}
.archive-date{color:var(--text-secondary);font-size:var(--caption-size);letter-spacing:var(--caption-ls)}
@media (max-width:640px){.archive-row{grid-template-columns:64px 1fr}.archive-row .arrow-link{grid-column:2}}

/* ---------- portraits ---------- */
.portrait{position:relative;background:var(--acb-bone);aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait-initials{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:64px;color:var(--acb-graphite);text-transform:uppercase;letter-spacing:-0.02em}
.portrait-caption{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--acb-graphite)}

/* ---------- directory ---------- */
.dir-tools{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-6)}
.dir-search{max-width:320px}
.chip{font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--eyebrow-size);letter-spacing:0.1em;text-transform:uppercase;padding:9px 14px;background:transparent;color:var(--text-primary);border:var(--rule-hairline) solid var(--acb-ash);border-radius:var(--radius-sm);cursor:pointer;transition:background-color .12s linear,color .12s linear,border-color .12s linear}
.chip:hover{border-color:var(--acb-ink)}
.chip[aria-pressed="true"]{background:var(--acb-ink);color:var(--acb-cream);border-color:var(--acb-ink)}
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:1024px){.dir-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dir-grid{grid-template-columns:1fr}}
.creator-card{background:var(--surface-card);border:var(--rule-hairline) solid var(--border-hairline);display:flex;flex-direction:column}
.creator-card .portrait-wrap{padding:var(--space-3) var(--space-3) 0}
.creator-card .creator-body{padding:var(--space-4) var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.creator-name{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);text-transform:uppercase;margin:0}
.creator-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--text-secondary);font-size:var(--caption-size);letter-spacing:var(--caption-ls)}
.creator-meta b{color:var(--text-primary);font-weight:var(--font-weight-medium)}
.creator-bio{margin:0;font-size:var(--small-size);line-height:var(--small-lh);flex:1}
.creator-links{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-2);border-top:var(--rule-hairline) solid var(--border-hairline);font-size:var(--caption-size)}
.creator-links span{color:var(--text-secondary)}
.tag-sample{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acb-graphite);border:var(--rule-hairline) solid var(--acb-ash);border-radius:var(--radius-sm);padding:3px 6px}
.tag-featured{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acb-crimson);border:var(--rule-hairline) solid var(--acb-crimson);border-radius:var(--radius-sm);padding:3px 6px}
.dir-note{background:var(--surface-sunken);border:var(--rule-hairline) solid var(--border-hairline);padding:var(--space-3) var(--space-4);font-size:var(--small-size);color:var(--text-secondary);margin-bottom:var(--space-6)}
.dir-empty{padding:var(--space-8) 0;text-align:center;color:var(--text-secondary)}

/* ---------- feature (profile) ---------- */
.feature-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-7);align-items:start}
@media (max-width:1024px){.feature-grid{grid-template-columns:1fr}}
.pullquote{border-top:var(--rule-medium) solid var(--border-strong);border-bottom:var(--rule-medium) solid var(--border-strong);padding:var(--space-5) 0;margin:var(--space-6) 0}
.pullquote p{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);text-transform:uppercase;margin:0 0 var(--space-3)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-hairline) solid var(--border-hairline);border-bottom:var(--rule-hairline) solid var(--border-hairline);margin-block:var(--space-5)}
.stat-row>div{padding:var(--space-4) var(--space-3);text-align:center}
.stat-row>div+div{border-left:var(--rule-hairline) solid var(--border-hairline)}
.stat-num{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h1-size);line-height:1;text-transform:uppercase}
.stat-label{font-size:var(--caption-size);letter-spacing:var(--caption-ls);color:var(--text-secondary);margin-top:var(--space-1)}

/* ---------- inverse band ---------- */
.band{background:var(--surface-inverse);color:var(--text-inverse)}
.band .eyebrow{color:var(--acb-cream)}
.band a:not(.btn){color:var(--acb-cream);border-bottom-color:var(--acb-cream)}
.band a:not(.btn):hover{color:var(--acb-ash);border-bottom-color:var(--acb-ash)}
.band .btn{background:var(--acb-cream);color:var(--acb-ink)}
.band a.btn,.band a.btn:hover{color:var(--acb-ink)}
.band .btn:hover{background:#fff}
.band-inner{display:grid;gap:var(--space-4);justify-items:center;text-align:center;padding-block:var(--space-8)}
.band-title{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--display-m-size);line-height:var(--display-m-lh);letter-spacing:var(--display-m-ls);text-transform:uppercase;color:var(--text-inverse);margin:0}
.band .measure-c{max-width:560px;margin:0;color:var(--acb-ash)}

/* ---------- issue page ---------- */
.issue-header{padding-block:var(--space-8) var(--space-6)}
.issue-body h2{margin:0}
.event-row{display:grid;grid-template-columns:150px 1fr;gap:var(--space-5);padding-block:var(--space-5);border-top:var(--rule-hairline) solid var(--border-hairline)}
.event-row:last-of-type{border-bottom:var(--rule-hairline) solid var(--border-hairline)}
.event-when{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h3-size);line-height:1.1;text-transform:uppercase}
.event-when small{display:block;font-family:var(--font-body);font-weight:var(--font-weight-medium);font-size:var(--small-size);text-transform:none;color:var(--text-secondary);margin-top:var(--space-1)}
.event-name{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h3-size);line-height:var(--h3-lh);letter-spacing:var(--h3-ls);text-transform:uppercase;margin:0 0 var(--space-1)}
.event-where{color:var(--text-secondary);font-size:var(--small-size);margin:0 0 var(--space-2)}
.event-note{margin:0;font-size:var(--small-size);line-height:var(--small-lh)}
@media (max-width:640px){.event-row{grid-template-columns:1fr;gap:var(--space-2)}}
.feed-item{padding-block:var(--space-4);border-top:var(--rule-hairline) solid var(--border-hairline)}
.feed-item:last-of-type{border-bottom:var(--rule-hairline) solid var(--border-hairline)}
.feed-item h4{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);font-size:var(--h3-size);letter-spacing:var(--h3-ls);text-transform:uppercase;margin:0 0 var(--space-1)}
.feed-item p{margin:0;font-size:var(--small-size);line-height:var(--small-lh)}

/* ---------- footer ---------- */
.footer{background:var(--surface-inverse);color:var(--acb-ash);margin-top:var(--space-10)}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);padding-block:var(--space-8)}
.footer .brand-name{color:var(--acb-cream);font-size:26px}
.footer-tag{margin:var(--space-3) 0 0;font-size:var(--small-size);max-width:380px}
.footer-nav{display:grid;gap:var(--space-2);justify-items:start}
.footer-nav a{color:var(--acb-cream);border-bottom:none;font-size:var(--small-size)}
.footer-nav a:hover{color:var(--acb-ash)}
.footer-bottom{border-top:1px solid #2a2a2a;padding-block:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:var(--caption-size);letter-spacing:var(--caption-ls)}
.footer .bkmark{color:var(--acb-cream)}
@media (max-width:640px){.footer-inner{grid-template-columns:1fr}}