/* The IRISBOARD blog. Same header, palette, type and 1120px width as the home page and the privacy
   policy, so moving between them does not shift the logo or change the voice. Articles keep a
   readable text column and use the rest of the width for a sidebar. */
:root{--ink:#16120F;--ink2:#4A4340;--muted:#7A716C;--line:#E8E2DD;--wash:#F7F4F1;--paper:#FFF;
  --orange:#F26522;--orange-deep:#C2410C;--orange-wash:#FFF1E9;
  --disp:'Archivo',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--orange-deep)}
a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;height:74px;gap:18px}
.brand{display:block;width:168px;height:44px;flex-shrink:0;background:no-repeat center/contain
  url("/_content/IRISBOARD.Shared.Ui/img/irisboard-logo-black.png")}
.sp{flex:1}
.hd-link{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none}
.hd-link:hover,.hd-link[aria-current]{color:var(--orange-deep)}
.btn{display:inline-flex;align-items:center;font-family:var(--body);font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:9px;border:1px solid transparent;background:var(--orange);color:#fff;
  text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--orange-deep)}

main.wrap{padding-top:40px;padding-bottom:64px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--orange-deep)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4.4vw,42px);letter-spacing:-.03em;
  line-height:1.12;margin:8px 0 14px;text-wrap:balance}
.meta{color:var(--muted);font-size:14px;margin-bottom:28px}
.lede{font-size:19px;color:var(--ink);margin-bottom:22px;max-width:64ch}
h1{max-width:30ch}
h2{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1.25;
  margin:40px 0 12px;text-wrap:balance}
h3{font-family:var(--disp);font-weight:600;font-size:18px;margin:26px 0 8px}
p{margin-bottom:16px;color:var(--ink2)}
ul,ol{margin:0 0 18px 22px;color:var(--ink2)}
li{margin-bottom:8px}
strong{color:var(--ink);font-weight:600}

/* Images: width and height are set on each <img>, so the page does not jump as they load. */
figure{margin:0 0 26px}
figure img{display:block;width:100%;height:auto;border-radius:14px;background:var(--wash)}
figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.hero{margin:0 0 28px}

.callout{background:var(--wash);border-left:3px solid var(--orange);padding:16px 18px;
  border-radius:0 8px 8px 0;margin:22px 0}
.callout p:last-child{margin-bottom:0}

/* An article: the text column on the left (about 70 characters a line — wider is harder to read),
   and a sidebar that stays in view on the right. Below 960px the sidebar drops under the article. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.side{position:sticky;top:98px;display:grid;gap:22px}
@media (max-width:960px){
  .layout{grid-template-columns:1fr;gap:40px}
  .side{position:static}
}

.cta{padding:22px;border-radius:14px;background:var(--orange-wash);border:1px solid #FBD5BF}
.cta h2{margin:0 0 8px;font-size:19px}
.cta p{margin-bottom:14px;font-size:15px;line-height:1.6}

.related{border:1px solid var(--line);border-radius:14px;padding:18px}
.related h2{font-size:13px;font-family:var(--body);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.related ul{list-style:none;margin:0;display:grid;gap:14px}
.related li{margin:0}
.related a{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start;text-decoration:none;
  color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.4}
.related a:hover{color:var(--orange-deep)}
.related img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;
  background:var(--wash)}

/* The listing: three cards across on a laptop, two on a tablet, one on a phone. */
.posts{list-style:none;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:960px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s;
  display:flex;flex-direction:column;margin:0}
.post-thumb{display:block;background:var(--wash)}
.post-thumb img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.post-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.post:hover{border-color:var(--orange)}
.post h2{margin:6px 0 8px;font-size:20px}
.post h2 a{color:var(--ink);text-decoration:none}
.post h2 a:hover{color:var(--orange-deep)}
.post p{margin-bottom:12px;font-size:15.5px;line-height:1.6}
.post .more{margin-top:auto;font-size:14px;font-weight:600;text-decoration:none}


@media (max-width:560px){
  .hd-in{gap:12px}
  .brand{width:130px}
  body{font-size:16px}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── footer ──
   The home page's footer, brought to every public page: columns under headings, then a bar with
   the copyright and the IRIS Application button. One line of links across the bottom had become a
   string nobody could scan, and the two policies sat where a button belonged. */
.ft{border-top:1px solid var(--line);padding:40px 0 22px;margin-top:56px;color:var(--muted);font-size:13.5px}
.ft-cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:40px;align-items:start}
.brand-ft{display:block;width:150px;height:40px;margin-bottom:14px;background:no-repeat center/contain
  url("/_content/IRISBOARD.Shared.Ui/img/irisboard-logo-black.png")}
.ft-brand p{font-size:13px;color:var(--muted);line-height:1.6;max-width:32ch;margin-bottom:12px}
.ft-by{font-size:12.5px;color:var(--muted)}
.ft-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.ft-col ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:9px}
.ft-col li{margin:0}
.ft-col a{font-size:13.5px;color:var(--ink2);text-decoration:none}
.ft-col a:hover{color:var(--orange-deep)}
.ft-base{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ft-base a{color:var(--muted);text-decoration:none}
.ft-base a:hover{color:var(--orange-deep)}
.ft-sp{flex:1}

/* IRIS Application: one button, two ways to run the player. Opens upward because it sits at the
   foot of the page. Hover for a mouse; focus-within so a tap, a TV remote or Tab opens it too. */
.app-menu{position:relative}
.ft-btn{display:inline-flex;align-items:center;gap:6px;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;padding:8px 14px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink)}
.ft-btn:hover{border-color:var(--orange);color:var(--orange-deep)}
.app-pop{position:absolute;right:0;bottom:100%;padding-bottom:8px;display:none;z-index:20}
.app-pop-in{display:flex;flex-direction:column;gap:6px;min-width:250px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(22,18,15,.12)}
.app-menu:hover .app-pop,.app-menu:focus-within .app-pop{display:block}
.app-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;
  color:var(--ink);font-weight:600;font-size:13px;text-decoration:none}
.app-pop a:hover,.app-pop a:focus-visible{background:var(--wash);color:var(--orange-deep);outline:none}
.app-pop small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}

@media (max-width:860px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:480px){
  .ft-cols{grid-template-columns:1fr;gap:28px}
}