/*  house-ia — the pieces the Picture House IA added on top of house-shell.
 *
 *  Loaded by two different kinds of page, which is why nothing in here is
 *  allowed to touch shared chrome:
 *
 *    - the standalone hubs (/picture-house/, /about/, /studio/), which get
 *      their whole look from house-shell.css and mark themselves .ia-page;
 *    - the long-standing pages (index, memes, trading, ledger, charity), which
 *      carry their own inline copy of the chrome and only want the new parts.
 *
 *  So: no :root, no bare .sk-nav or .sk-sub rules, and every colour is read
 *  through a var with the literal as a fallback, so a page that never defined
 *  the palette still renders in house colours rather than browser defaults.
 *  Anything that has to correct shared chrome is scoped under .ia-page.
 */

/* --------------------------------------------------------------- skip link
 * Every older page carries its own .sk-skip inline; house-shell has none, so
 * the hubs get one here rather than each inventing it again.
 */
.ia-skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--fisik,#7A8B54);color:var(--ink,#14110F);padding:.6rem 1rem;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;}
.ia-skip:focus{left:.5rem;top:.5rem;}

/* ---------------------------------------------------------------- nav trim
 * house-shell's nav is padding-sized; every page that predates it sizes the
 * nav by height so the sticky offsets line up. The hubs are new, so they take
 * the older, more exact rules — scoped, so the pages house-shell was written
 * for are untouched.
 */
.ia-page{--sk-nav-h:38px;}
.ia-page .sk-nav{z-index:150;background:#1b1712;backdrop-filter:none;}
.ia-page .sk-nav ul{padding:0 .5rem;max-width:1040px;align-items:stretch;}
.ia-page .sk-nav li{flex:0 0 auto;}
.ia-page .sk-nav a{display:inline-flex;align-items:center;height:var(--sk-nav-h);
  padding:0 .9rem;font-size:11px;letter-spacing:.13em;color:var(--sepia,#C9A876);
  border-bottom:2px solid transparent;}
.ia-page .sk-nav a:hover{color:var(--stock,#EDE3D0);background:rgba(237,227,208,.05);}
.ia-page .sk-nav a:focus-visible{outline:2px solid var(--fisik,#7A8B54);outline-offset:-2px;}
.ia-page .sk-nav a[aria-current="page"]{color:var(--stock,#EDE3D0);box-shadow:none;
  border-bottom-color:var(--fisik,#7A8B54);}
@media (max-width:720px){
  .ia-page{--sk-nav-h:34px;}
  .ia-page .sk-nav a{padding:0 .7rem;font-size:10px;letter-spacing:.09em;}
}

/* --------------------------------------------------------- the wing subnav
 * Second-level nav for the two wings. Deliberately its own class rather than
 * house-shell's .sk-sub: the pages that moved under /about/ carry an inline
 * copy of the chrome and never load house-shell, so a component that leans on
 * it would style correctly on the hubs and be unreadable on the ledger. This
 * one stands alone and reads --sk-nav-h with a fallback, so it sits under the
 * nav on every page that has one.
 */
.ia-sub{position:sticky;top:var(--sk-nav-h,38px);z-index:140;
  background:var(--ink,#14110F);border-bottom:1px solid var(--soot,#4A4136);}
.ia-sub .inner{max-width:1040px;margin:0 auto;padding:0 .5rem;display:flex;
  align-items:center;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;min-height:34px;}
.ia-sub .inner::-webkit-scrollbar{display:none;}
.ia-sub .lbl{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soot-2,#8a7f6d);flex:0 0 auto;padding:0 .4rem 0 .5rem;}
.ia-sub a{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--soot-2,#8a7f6d);
  padding:.45rem .7rem;border:1px solid transparent;border-radius:2px;
  white-space:nowrap;flex:0 0 auto;}
.ia-sub a:hover{color:var(--sepia,#C9A876);border-color:var(--soot,#4A4136);}
.ia-sub a:focus-visible{outline:2px solid var(--fisik,#7A8B54);outline-offset:-2px;}
.ia-sub a[aria-current="page"]{color:var(--ink,#14110F);background:var(--fisik,#7A8B54);
  border-color:var(--fisik,#7A8B54);font-weight:700;}
/* Workshop and Library already carry a sticky sub-nav of their own. A second
 * one pinned to the same offset would sit on top of it, so the wing strip
 * scrolls away on those two and only the page's own nav stays put. */
.ia-sub.flat{position:static;}
@media (max-width:720px){
  .ia-sub .inner{min-height:32px;}
  .ia-sub a{font-size:9px;padding:.4rem .55rem;}
}

/* ------------------------------------------------------------- the doors
 * The homepage fork. Two panels, one per wing, deliberately the same weight
 * as each other so neither reads as the default.
 */
.door-row{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.75rem 0 2rem;}
@media(min-width:640px){.door-row{grid-template-columns:1fr 1fr;}}
.door{display:flex;flex-direction:column;text-align:left;
  border:1px solid var(--soot,#4A4136);padding:1.5rem 1.35rem;
  background:var(--ink-2,#1b1712);text-decoration:none;color:inherit;min-height:190px;
  transition:border-color .2s ease,transform .2s ease;}
.door:hover{border-color:var(--sepia,#C9A876);transform:translateY(-3px);}
.door.house{border-color:rgba(122,139,84,.55);}
.door.ticker{border-color:rgba(201,168,118,.45);}
.door .ey{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sepia,#C9A876);margin:0 0 .6rem;flex:0 0 auto;}
.door h2{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,4vw,2rem);
  margin:0 0 .5rem;font-weight:600;line-height:1.1;}
.door p{margin:0;line-height:1.55;color:#cfc5b0;flex:1;font-size:1.02rem;}
.door .go{margin-top:1.1rem;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fisik,#7A8B54);}

/* ------------------------------------------------------------ hub layout
 * Only used by the standalone hubs; house-shell has no card grid of its own
 * that stretches to three columns.
 */
.ia-wrap{max-width:960px;margin:0 auto;padding:2rem 1.15rem 4rem;}
.ia-eyebrow{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sepia,#C9A876);margin:0 0 .5rem;}
.ia-title{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(2.4rem,8vw,3.6rem);line-height:.95;margin:0 0 1rem;
  color:var(--stock,#EDE3D0);}
.ia-title em{font-style:italic;font-weight:500;color:var(--sepia,#C9A876);}
.ia-lede{font-size:1.15rem;line-height:1.65;color:#e5d9c4;max-width:48ch;margin:0 0 1.5rem;}
.ia-grid{display:grid;grid-template-columns:1fr;gap:.9rem;}
@media(min-width:720px){.ia-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.ia-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}}
.ia-card{display:flex;flex-direction:column;border:1px solid var(--soot,#4A4136);
  padding:1.25rem 1.2rem;background:var(--ink-2,#1b1712);text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease;}
a.ia-card:hover{border-color:var(--sepia,#C9A876);transform:translateY(-2px);}
.ia-card .ey{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sepia,#C9A876);margin:0 0 .5rem;flex:0 0 auto;}
.ia-card h3{font-family:Fraunces,Georgia,serif;font-size:1.4rem;margin:0 0 .45rem;font-weight:600;}
.ia-card p{margin:0;line-height:1.55;color:#cfc5b0;flex:1;}
.ia-card .go{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fisik,#7A8B54);margin-top:1rem;}
.ia-card.soon{opacity:.62;border-style:dashed;}
.ia-card.soon .go{color:var(--soot-2,#8a7f6d);}
.ia-prose{font-size:1.08rem;line-height:1.7;color:#e5d9c4;max-width:62ch;}
.ia-prose h2{font-family:Fraunces,Georgia,serif;color:var(--stock,#EDE3D0);font-size:1.55rem;
  margin:2rem 0 .75rem;}
.ia-prose a{color:var(--sepia,#C9A876);text-decoration:underline;text-underline-offset:3px;}
.ia-prose ul{padding-left:1.2rem;}
.ia-prose li{margin:.35rem 0;}

/* The small typewritten slip that explains where a page has moved to, or what
 * a wing is for. Same voice as .banner in house-shell, but it is a note rather
 * than a warning, so it is set in the softer stock colour. */
.ia-note{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.08em;
  line-height:1.6;color:var(--fisik,#7A8B54);border:1px solid rgba(122,139,84,.4);
  padding:.85rem 1rem;margin:0 0 1.75rem;}
.ia-note a{color:var(--sepia,#C9A876);}

.ia-foot{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--soot,#4A4136);
  text-align:center;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soot-2,#8a7f6d);line-height:2;}
.ia-foot a{color:var(--sepia,#C9A876);}
.ia-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .5rem;
  line-height:1.9;margin:0 0 .9rem;}

/* ----------------------------------------------------------- ward weather
 * The mood strip. It is a reading of the tape rendered as house weather, and
 * the disclaimer is part of the component rather than something a page has to
 * remember to add — see assets/market-mood.js.
 */
.mood-strip{border:1px solid var(--soot,#4A4136);background:var(--ink-2,#1b1712);
  padding:1.1rem 1.2rem;margin:1rem 0 1.5rem;}
.mood-strip .ey{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sepia,#C9A876);}
.mood-strip .mood-name{font-family:Fraunces,Georgia,serif;font-size:1.65rem;margin:.35rem 0;
  color:var(--stock,#EDE3D0);line-height:1.15;}
.mood-strip .mood-line{font-size:1.05rem;color:#e5d9c4;line-height:1.55;margin:0;}
.mood-strip .mood-line em{color:var(--sepia,#C9A876);font-style:italic;}
.mood-strip .mood-meta{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soot-2,#8a7f6d);margin-top:.65rem;}

/* --------------------------------------------------------- floor chooser
 * Market vs Public on /memes. Buttons rather than links for the two floors,
 * because switching floor filters what is already on screen instead of
 * navigating; the two anchors beside them do navigate, and look the same on
 * purpose — they are all doors out of the same row.
 */
.floor-chooser{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.1rem;}
.floor-chooser .floor-btn{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--soot,#4A4136);background:transparent;
  color:var(--stock,#EDE3D0);padding:.7rem 1rem;min-height:44px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:border-color .15s ease,color .15s ease;}
.floor-chooser .floor-btn:hover{border-color:var(--sepia,#C9A876);color:var(--sepia,#C9A876);}
.floor-chooser .floor-btn:focus-visible{outline:2px solid var(--fisik,#7A8B54);outline-offset:2px;}
.floor-chooser button.floor-btn.is-on{border-color:var(--fisik,#7A8B54);
  background:var(--fisik,#7A8B54);color:var(--ink,#14110F);font-weight:700;}
.floor-banner{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soot-2,#8a7f6d);margin:0 0 1rem;line-height:1.7;}
.floor-banner strong{color:var(--sepia,#C9A876);font-weight:400;}

/* ------------------------------------------------------------ frame strip
 * A short gallery of struck frames, used on /studio/ to show the soft bank
 * rather than describe it. Deliberately not the full reel machinery from
 * /memes — no paging, no projector, six frames and a door.
 */
.ia-frames{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.25rem 0 0;
  padding:0;list-style:none;}
@media(min-width:720px){.ia-frames{grid-template-columns:repeat(3,1fr);}}
.ia-frames li{margin:0;}
.ia-frame{margin:0;border:1px solid var(--soot,#4A4136);background:var(--ink-2,#1b1712);
  display:block;text-decoration:none;color:inherit;transition:border-color .2s ease;}
a.ia-frame:hover{border-color:var(--sepia,#C9A876);}
.ia-frame img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  background:var(--ink,#14110F);}
.ia-frame .cap{display:block;font-family:"Space Mono",monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--soot-2,#8a7f6d);line-height:1.5;
  padding:.6rem .65rem;border-top:1px solid var(--soot,#4A4136);}
.ia-frames-note{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soot-2,#8a7f6d);margin:.9rem 0 0;}

@media (prefers-reduced-motion: reduce){
  .door,.ia-card{transition:none;}
  .door:hover,a.ia-card:hover{transform:none;}
}