/* =====================================================================
   frankgarcia.com — site.css
   The single stylesheet for every page on the site.
   Fonts: Barlow (Google Fonts), loaded in each page's <head>.
   ===================================================================== */

/* ---------- Design tokens: change colors and fonts here ---------- */
:root {
  --ink:        #1c1c1c;   /* body text */
  --ink-2:      #444444;   /* secondary text */
  --muted:      #737373;   /* dates, labels */
  --rule:       #e3e1dc;   /* thin dividers */
  --paper:      #ffffff;   /* page background */
  --tint:       #f5f4f0;   /* hover / panels */
  --accent:     #1d4e6e;   /* links, highlights */
  --accent-ink: #12354b;
  --highlight:  #fbf5e3;   /* highlighted (featured) posts */
  --todo:       #fff1b8;   /* placeholders you still need to fill in */

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --side: 5%;              /* left/right page margin (header, content, footer) */
  --radius: 4px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
}

/* ---------- Responsive type: base size scales with the window ---------- */
html {
  font-size: clamp(15px, 0.8rem + 0.38vw, 19px);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
h4 {font-family: "barlow";
    font-weight: 400;
}

[hidden] { display: none !important; }

body {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10%;
    background-color: var(--paper);
    color: var(--ink);
    font-family: Barlow;
    font-weight: 300;
    font-size: 1rem;           /* all other sizes are % / em of this */

    
}

/* ---------- Standard elements, per the site spec ---------- */
p {
  font-family: "Barlow Light";          /* Barlow Light */
  font-size: 100%;
  margin: 7pt 0 0;
}
h1 {                         /* page titles only */
  font-family:"Barlow Medium";
  font-size: 120%;
  letter-spacing: .01em;
  margin: 0;
  line-height: 1.25;
}
h2 {                         /* group headings / headings above post titles */
  font-family:"Barlow medium";
  font-weight: 400; font-size: 100%;
  margin: 2rem 0 0;
  line-height: 1.3;
}
h3 {                         /* post titles */
  font-weight: 400;          /* Barlow Regular */
  font-size: 110%;
  margin: 0;
  line-height: 1.3;
}
tbody font-family: "barlow medium";
font-weight: 400;
}
TH {font-family: "barlow medium";
font-weight: 300;}
thead {font-weight: 300;
}
ul, ol { padding-left: 1.25rem; margin: 7pt 0 0; }
li { font-weight: 300; margin-top: .3rem; }
strong, b { font-weight: 500; }
blockquote { margin: 1rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Header ---------- */
#header {
  margin: 3% var(--side) 5pt;
  padding: 0;
  width: auto;               /* = 100% of the space between the side margins */
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1rem;
}
.wordmark {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .2em;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.today { color: var(--muted); font-weight: 300; font-size: .9rem; }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  padding: .3rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.tool-group { display: flex; align-items: center; gap: .15rem; }

.tool {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .35rem .6rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tool:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
.tool[aria-expanded="true"] { background: var(--tint); border-color: var(--rule); }
.tool svg { width: 1.05em; height: 1.05em; flex: none; }
.tool .caret { font-size: .7em; color: var(--muted); }

/* Dropdown panels (menu, favorites, share, sort) */
.dd { position: relative; }
.dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: .4rem;
}
.dd-panel[hidden] { display: none; }
.tool-group.end .dd-panel { left: auto; right: 0; }
.panel-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding: .45rem .6rem .2rem;
}
.panel-link, .panel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-size: .95rem;
  font-weight: 400;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.panel-link:hover, .panel-btn:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
.panel-link[aria-current="page"] { font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.panel-link .hint { color: var(--muted); font-size: .8rem; font-weight: 300; }
.panel-sep { border-top: 1px solid var(--rule); margin: .35rem 0; }
.panel-empty { padding: .45rem .6rem; color: var(--muted); font-weight: 300; font-size: .9rem; }
.fav-row { display: flex; align-items: center; }
.fav-row .panel-link { flex: 1; min-width: 0; }
.fav-row .panel-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; padding: .2rem .5rem; border-radius: var(--radius); }
.fav-remove:hover { background: var(--tint); color: var(--ink); }
.panel-btn[aria-checked="true"]::after { content: "✓"; color: var(--accent); }

/* ---------- Main content ---------- */
#maincontent {
  margin: 0 var(--side);     /* no top margin; sides match the header */
  width: auto;
  padding: 1.75rem 0 3.5rem;
}
.prose { max-width: 44rem; }
.page-head { margin-bottom: 1.5rem; max-width: 44rem; }
.page-head .lede { font-size: 105%; color: var(--ink-2); }
.eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .35rem;
  font-weight: 400;
}
.muted { color: var(--muted); }
.todo { background: var(--todo); outline: 1px dashed #c9a400; padding: 0 .3em; border-radius: 2px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: .45rem .9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn-small {
  font: inherit;
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .2rem .55rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.btn-small:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn-small svg { width: .95em; height: .95em; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- EXPOUT: hover expands a brief description + share bar ---------- */
.xo-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.xo-body > div { overflow: hidden; min-height: 0; }
@media (hover: hover) {
  .expout:hover .xo-body,
  .expout:focus-within .xo-body,
  .expout.is-open .xo-body { grid-template-rows: 1fr; }
}
@media (hover: none), (max-width: 640px) {   /* touch screens and phones: always expanded */
  .xo-body { grid-template-rows: 1fr; }
}
.sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .55rem; padding-bottom: .15rem; }

/* ---------- Contents page (navpage) ---------- */
.toc { list-style: none; padding: 0; margin: 0; max-width: 46rem; counter-reset: toc; }
.toc-item {
  counter-increment: toc;
  border-top: 1px solid var(--rule);
  padding: .9rem .9rem .9rem 2.6rem;
  margin: 0;
  position: relative;
  transition: background .15s ease;
}
.toc-item:last-child { border-bottom: 1px solid var(--rule); }
.toc-item::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: .6rem;
  top: 1.05rem;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .05em;
}
.toc-item:hover, .toc-item:focus-within { background: var(--tint); }
.toc-item h2 { margin: 0; }
.toc-item h2 a { color: var(--ink); text-decoration: none; }
.toc-item h2 a:hover { color: var(--accent); }
.toc-item .brief { color: var(--ink-2); }

.focus-areas { max-width: 44rem; }
.focus { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.75rem; }
.focus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.focus-head h2 { margin: 0; }
.pull { font-size: 115%; font-weight: 400; font-style: italic; margin-top: 1rem; }

/* ---------- Posts ---------- */
.boxes { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 2rem; align-items: start; }
@media (min-width: 760px) { .boxes { grid-template-columns: 1fr 1fr; } }
.box { border: 1px solid var(--rule); border-radius: 6px; padding: .9rem 1.1rem 1rem; }
.box h2 { margin: 0 0 .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.box ol, .box ul { list-style: none; padding: 0; margin: 0; }
.box li { padding: .35rem 0; border-top: 1px solid var(--rule); margin: 0; font-weight: 400; }
.box li:first-child { border-top: 0; }
.box li a { text-decoration: none; color: var(--ink); }
.box li a:hover { color: var(--accent); }
.box li .muted { font-size: .8rem; font-weight: 300; margin-left: .35rem; white-space: nowrap; }
.box.highlight { background: var(--highlight); border-color: #eadcae; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chips a {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.chips a:hover { border-color: var(--ink); }
.chips .n { color: var(--muted); font-weight: 300; margin-left: .25rem; }

.view-note { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
.topic { margin-top: 2.5rem; max-width: 50rem; }
.topic-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .35rem;
}
.topic-head h2 { margin: 0; }
.topic-desc { color: var(--ink-2); max-width: 44rem; }
.post-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.post { border-top: 1px solid var(--rule); padding: .8rem 0; margin: 0; }
.post:first-child { border-top: 0; }
.post.featured { background: var(--highlight); padding: .8rem .9rem; border-radius: 6px; border-top-color: transparent; }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--accent); text-decoration: underline; }
.post h3 .ext { font-size: .75em; color: var(--muted); margin-left: .2em; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .25rem; font-size: .8rem; color: var(--muted); font-weight: 300; }
.badge {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .05rem .4rem;
  background: var(--paper);
}
.badge.star { border-color: #d9c27a; color: #7a5d00; }
.post-summary { margin-top: .4rem; color: var(--ink-2); }
.citation { font-size: .85rem; color: var(--muted); }

/* ---------- Topics overview ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.topic-card {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .9rem 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.topic-card:hover { border-color: var(--ink); background: var(--tint); color: var(--ink); text-decoration: none; }
.topic-card h3 { font-weight: 500; font-size: 105%; }
.topic-card p { font-size: .88rem; color: var(--ink-2); margin-top: .3rem; }
.topic-card .n { font-size: .78rem; color: var(--muted); margin-top: .5rem; display: block; }

/* ---------- Proposals ---------- */
.proposal { border-top: 1px solid var(--rule); padding: .9rem 0 0; margin: 0 0 8pt; max-width: 46rem; }
.proposal h3 a { color: var(--ink); text-decoration: none; }
.proposal h3 a:hover { color: var(--accent); text-decoration: underline; }
.proposal .desc { color: var(--ink-2); }
.contactbar { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; padding-bottom: .4rem; }
.cat-group h2 { border-bottom: 1px solid var(--ink); padding-bottom: .35rem; max-width: 46rem; }

/* ---------- Art ---------- */
.art-section { margin-top: 2.25rem; }
.art-section > h2 { border-bottom: 1px solid var(--ink); padding-bottom: .35rem; margin-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.ph {
  aspect-ratio: 4 / 3;
  background: var(--tint);
  border: 1px dashed #cfccc4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 300;
  text-align: center;
  padding: .5rem;
}
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; font-weight: 300; }

/* ---------- Resume ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem; }
.resume { max-width: 48rem; }
.resume-head { border-bottom: 1px solid var(--ink); padding-bottom: .6rem; }
.resume-head .name { font-size: 140%; font-weight: 500; letter-spacing: .14em; margin: 0; }
.resume-head .title { font-weight: 400; margin-top: .2rem; }
.resume-head .contact { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.resume h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 1.75rem; }
.job { margin-top: 1.1rem; }
.job-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; align-items: baseline; }
.job-head h3 { font-size: 105%; font-weight: 500; }
.job-head .when { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.job .role { font-weight: 400; color: var(--ink-2); margin-top: .1rem; }
.job ul { margin-top: .35rem; }
.job li { margin-top: .2rem; }
.contact-card { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.2rem; max-width: 44rem; }
.contact-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: .5rem 0 0; }
.contact-card dt { color: var(--muted); font-size: .85rem; }
.contact-card dd { margin: 0; font-weight: 300; }

/* ---------- Landing page ---------- */
.landing {
  min-height: 58vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}
.landing .name { font-size: 180%; font-weight: 400; letter-spacing: .2em; margin: 0; }
.landing .contact { margin-top: .2rem; }
.landing .comein { display: inline-block; margin-top: 1.4rem; }
.landing .comein img { height: 3.2em; width: auto; display: block; }

/* ---------- Article pages ---------- */
.article { max-width: 44rem; }
.article h2 { margin-top: 2rem; }
.article li p { margin: 0; }

/* ---------- Footer ---------- */
#footer {
  margin: 0 var(--side) 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  font-size: .85rem;
  color: var(--muted);
  font-weight: 300;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
#footer a { color: var(--ink-2); }
#footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

/* ---------- Share popover + toast ---------- */
.share-pop { position: absolute; z-index: 60; }
.share-scope { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .3rem; }
.share-scope label { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem .6rem; font-size: .9rem; font-weight: 300; cursor: pointer; border-radius: var(--radius); }
.share-scope label:hover { background: var(--tint); }
.share-scope input { margin-top: .3rem; accent-color: var(--accent); }
.share-scope .q { display: block; color: var(--muted); font-size: .8rem; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.share-targets { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.share-targets .panel-btn { justify-content: flex-start; font-size: .9rem; }
.share-targets svg { width: 1em; height: 1em; flex: none; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  background: var(--ink);
  color: var(--paper);
  padding: .55rem 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ---------- Post layout (Word styles: subheading / posttitle / postattrib) ---------- */
h2.subheading {                       /* subtopic heading inside a topic */
  font-weight: 400;
  font-size: 108%;
  margin: 12pt 0 6pt;
  color: var(--ink);
}
.group-desc { margin: 0 0 4pt; color: var(--ink-2); max-width: 44rem; }
.post-list .post { border-top: 0; padding: 0; margin: 0; }
.post h3 { margin: 12pt 0 0 .25in; }   /* posttitle */
p.postattrib {                         /* postattrib */
  font-weight: 300;
  margin: 0 0 0 35.5pt;
  color: var(--ink-2);
  font-size: 95%;
  line-height: 1.45;
}
p.postattrib a { color: var(--ink-2); }
p.postattrib.post-summary { margin-top: 4pt; color: var(--ink); font-size: 100%; }
p.postattrib.also { font-size: 85%; color: var(--muted); margin-top: 2pt; }
.post.featured { background: var(--highlight); border-radius: 6px; padding: 2pt 0 0; }

/* The small icon that separates posts; pointing at it reveals the post bar. */
.post-sep {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 6pt 0 0 35.5pt;
  min-height: 2rem;
}
.post-sep::after {                     /* faint rule continuing the separator */
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
  transition: opacity .15s ease;
}
.post-sep.is-open::after { opacity: 0; }
.sep-icon {
  flex: none;
  width: 30px;
  height: 22px;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
}
.sep-icon svg { width: 22px; height: 13px; display: block; }
.sep-icon:hover, .post-sep.is-open .sep-icon { color: var(--ink); background: var(--tint); }
.postbar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
}
.post-sep.is-open .postbar { display: flex; }
.pb {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .25rem .5rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.pb:hover, .pb[aria-expanded="true"], .pb.on { background: var(--tint); color: var(--ink); text-decoration: none; }
.pb svg { width: 1em; height: 1em; flex: none; }
.pb-like[aria-pressed="true"] { color: #b3261e; }
.pb .n { color: var(--muted); font-size: .9em; }
.pb .n:empty { display: none; }
.pb-dd { position: relative; display: inline-flex; }
.pb-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 12.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: .3rem;
  display: flex;
  flex-direction: column;
}
.pb-menu[hidden] { display: none; }
.pb-menu button {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  text-align: left;
  font: inherit;
  font-size: .88rem;
  font-weight: 400;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: .4rem .55rem;
  cursor: pointer;
  color: var(--ink);
}
.pb-menu button:hover { background: var(--tint); }
.pb-menu .hint { color: var(--muted); font-size: .8em; font-weight: 300; }
.pb-langs { max-height: 18rem; overflow-y: auto; min-width: 14rem; }

/* AI result panel (Simplify / Translate) */
.ai-panel {
  margin: 8pt 0 0 35.5pt;
  max-width: 42rem;
  border-left: 3px solid var(--accent);
  background: var(--tint);
  border-radius: 0 6px 6px 0;
  padding: .6rem .9rem .7rem;
}
.ai-head { display: flex; justify-content: space-between; align-items: center; }
.ai-head .eyebrow { margin: 0; }
.ai-body p:first-child { margin-top: .2rem; }
.ai-body ul { margin-top: .3rem; }
.ai-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .78rem; color: var(--muted); font-weight: 300; }

/* Section-level tools on the posts page */
.section-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 1rem; max-width: 50rem; }
.seg { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; }
.seg-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 .55rem 0 .6rem; }
.seg button { font: inherit; font-size: .82rem; font-weight: 400; background: none; border: 0; border-radius: 999px; padding: .22rem .7rem; cursor: pointer; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.topic-head > div { min-width: 0; }
.topic-head .eyebrow { margin: 0 0 .1rem; }
.topic-actions { display: flex; gap: .4rem; flex: none; }
.inline-icon {
  display: inline-block; width: 18px; height: 11px; vertical-align: middle;
  background: linear-gradient(#8a8a8a 0 0) 1px 0 / 17px 2px no-repeat, linear-gradient(#8a8a8a 0 0) 0 4.5px / 17px 2px no-repeat, linear-gradient(#8a8a8a 0 0) 1px 9px / 17px 2px no-repeat;
}

/* ---------- Dialogs: Submit a post / Send me a message ---------- */
.fg-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  color: var(--ink);
  font-family: var(--font);
}
.fg-dialog::backdrop { background: rgba(20, 20, 20, .35); }
.dlg-close-row { display: flex; justify-content: space-between; align-items: center; margin: 0; }
.dlg-close-row h2 { margin: 0; }
.dlg-intro { color: var(--ink-2); margin-top: .35rem; font-size: .95rem; }
.dlg-status { min-height: 1.2em; font-size: .85rem; color: var(--accent); margin-top: .35rem; }
.dlg-done { padding: 1rem 0 .25rem; }
.fld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; margin-top: .5rem; }
.fld { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.fld.wide { grid-column: 1 / -1; }
.fld > span { color: var(--ink-2); font-weight: 400; }
.fld em { color: var(--muted); font-style: normal; font-weight: 300; }
.fld .hint { color: var(--muted); font-size: .78rem; font-weight: 300; }
.fld input, .fld textarea, .fld select {
  font: inherit;
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #cfcdc7;
  border-radius: var(--radius);
  padding: .45rem .55rem;
  width: 100%;
}
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.lookup-row { display: flex; align-items: flex-end; gap: .5rem; margin-top: .75rem; }
.lookup-row .fld { flex: 1; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) {
  .fld-grid { grid-template-columns: 1fr; }
  .fg-dialog { padding: .9rem 1rem 1rem; }
  .post h3 { margin-left: 0; }
  p.postattrib, .post-sep, .ai-panel { margin-left: 1rem; }
  .post-sep { flex-wrap: wrap; }
  .postbar { flex-basis: 100%; }
  .post-sep.is-open::after { display: none; }
  .topic-actions { flex-wrap: wrap; }
}

/* Toolbar labels give way to icons on narrower screens */
@media (max-width: 1100px) {
  .tool-group.end .tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  :root { --side: 16px; }
  #header { margin-top: 16px; }
  .tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tool { padding: .45rem .55rem; }
  .landing { justify-content: flex-start; text-align: left; min-height: 50vh; }
  .landing .name { font-size: 145%; }
  .contact-card dl { grid-template-columns: 1fr; gap: 0; }
  .contact-card dd { margin-bottom: .5rem; }
  .toc-item { padding-left: 2.2rem; }
  .topic-head { flex-wrap: wrap; align-items: baseline; }
  .topic-head h2 { flex: 1 1 100%; }
}

/* ---------- Print ---------- */
@media print {
  @page { size: Letter; margin: .55in .65in; }
  html { font-size: 9.5pt; }
  body { line-height: 1.4; }
  #header, #footer, .subnav, .no-print, .sharebar, .contactbar, .toast, .share-pop, .post-sep, .section-tools, .topic-actions, .chips { display: none !important; }
  #maincontent { margin: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .xo-body { grid-template-rows: 1fr !important; }
  .job-head, .job .role, .post, .proposal, .toc-item, li { break-inside: avoid; }
  .job-head { break-after: avoid; }
  .resume h2 { margin-top: 1rem; }
  .job { margin-top: .7rem; }
  .job ul, .job p { margin-top: 3pt; }
  h1, h2, h3 { break-after: avoid; }
  body[data-page="resume"] .print-skip { display: none !important; }
  .resume, .prose, .article { max-width: none; }
}