/* Round 06 U "Formula Bar": the homepage as a spreadsheet. Brand rules: light. */
:root {
  /* Stevens palette (VBG p.22), copied exactly */
  --red: #A32638;        /* Stevens Red: active cell, fill handle, the "+" operator, buttons */
  --ink: #363D45;        /* Dark Gray: all text */
  --blue: #004380;       /* Dark Blue: in-cell hyperlinks, the way a sheet shows them */
  --mblue: #4896CF;      /* Medium Blue: Faculty lecture swatch */
  --orange: #E7842E;     /* Medium Orange: Hackathon swatch */
  --gold: #EBC73B;       /* Medium Gold: Forum swatch */
  --lgray: #E4E5E6;      /* Light Gray: gridlines and the header bands */
  --lblue: #E7F2FB;      /* Light Blue: hover on a sheet tab or a named-range item (small chips only) */
  --white: #FFFFFF;

  --disp: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
  --saira: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --fxi: 'Bitter', Georgia, serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --gut: 24px;
  --rn-w: 48px;
  --fx-h: 96px;
  --tabs-h: 42px;
  --status-h: 42px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.nw { white-space: nowrap; }

.skip {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  background: var(--white); color: var(--red); font-weight: 600; padding: 10px 14px;
  border: 2px solid var(--red);
}
.skip:focus { top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 3px;
  font: 600 16px/1.2 var(--body); text-decoration: none; white-space: nowrap;
}
.btn-red { background: var(--red); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { background: var(--ink); }
}

/* ---------- app bar: wordmark with its 33.4 px clear space, the document title, Share-position button */
.appbar {
  display: flex; align-items: center; gap: 0;
  min-height: 117px; padding: 0 var(--gut);
  border-bottom: 1px solid var(--lgray);
}
.mark { display: block; flex: none; margin-right: 34px; line-height: 0; }
.mark img { display: block; width: 188px; height: 50px; }
.doc { min-width: 0; }
.doc h1 { margin: 0; font: 600 30px/1.1 var(--disp); }
.doc-sub { margin: 4px 0 0; font: 400 16px/1.3 var(--body); }
.bar-mail { margin-left: auto; flex: none; }

/* ---------- the app: formula bar, sheets, tabs, status */
.app { display: flex; flex-direction: column; }

.fxbar {
  order: 1; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center;
  height: var(--fx-h); padding: 0 var(--gut);
  background: var(--white); border-bottom: 1px solid var(--lgray);
}
.namebox-wrap { position: relative; flex: none; }
.namebox {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 112px; height: 44px; padding: 0 10px 0 12px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--white);
  font: 500 17px/1 var(--body); color: var(--ink);
}
button.namebox { cursor: pointer; }
.nb-chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ranges {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 300px; padding: 8px 0; background: var(--white);
  border: 1px solid var(--ink);
}
.ranges[hidden] { display: none; }
.ranges-h { margin: 0; padding: 4px 14px 8px; font: 600 14px/1.2 var(--body); border-bottom: 1px solid var(--lgray); }
.ranges ul { list-style: none; margin: 0; padding: 4px 0 0; }
.ranges button {
  display: flex; justify-content: space-between; gap: 24px; width: 100%;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: 400 16px/1.2 var(--body); color: var(--ink); text-align: left;
}
.ranges .ref-t { color: var(--blue); font-variant-numeric: tabular-nums; }
.ranges button:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .ranges button:hover { background: var(--lblue); }
}

.fx-icons {
  display: flex; align-items: center; gap: 12px; flex: none;
  height: 44px; margin-left: 14px; padding: 0 16px;
  border-left: 1px solid var(--lgray); border-right: 1px solid var(--lgray);
}
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ok { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 2px; }
.ok.lit { background: var(--red); color: var(--white); }
.fxi { font: italic 400 21px/1 var(--fxi); padding-left: 2px; }

.fx { position: relative; flex: 1; min-width: 0; padding-left: 22px; }
.fx-text, .fx-typed {
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx { --fxs: 68px; }
.fx.fx-m { --fxs: 48px; }
.fx.fx-s { --fxs: 32px; }
.fx.is-formula .fx-text, .fx-typed {
  font-family: var(--saira); font-weight: 600; font-stretch: 100%;
  font-size: var(--fxs); line-height: 1.12; letter-spacing: -0.01em;
}
.fx.is-value .fx-text { font: 400 24px/1.3 var(--body); }
.op { color: var(--red); }
.fx-mail { display: none; }

/* typing overlay (aria-hidden, built by sheet.js for the load moment only) */
.fx-typed { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); overflow: visible; }
.fx-typed .ch { opacity: 0; }
.caret {
  position: absolute; left: 0; top: 0.16em; width: 3px; height: 0.86em;
  background: var(--ink);
}

.tabs {
  order: 3; position: sticky; bottom: var(--status-h); z-index: 25;
  display: flex; align-items: stretch; height: var(--tabs-h);
  padding: 0 var(--gut) 0 calc(var(--gut) + var(--rn-w));
  background: var(--white); border-top: 1px solid var(--lgray);
}
.tab {
  display: flex; align-items: center; padding: 0 22px;
  font: 600 16px/1 var(--body); color: var(--ink); text-decoration: none;
  border: 0; border-right: 1px solid var(--lgray); border-bottom: 3px solid transparent;
  background: var(--white); cursor: pointer;
}
.tab:first-child { border-left: 1px solid var(--lgray); }
.tab.is-on { color: var(--red); border-bottom-color: var(--red); }
.tab:focus-visible { outline-offset: -4px; }

.sheets { order: 2; padding: 0 var(--gut); scroll-margin-top: var(--fx-h); overflow-x: clip; }
.sheet { scroll-margin-top: var(--fx-h); }
.sheet[hidden] { display: none; }
.sheet-h { margin: 28px 0 10px; font: 600 26px/1.1 var(--disp); }
.js-ready .sheet-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.sheet-wrap { position: relative; }

.status {
  order: 4; position: sticky; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 24px;
  min-height: var(--status-h); padding: 0 var(--gut);
  background: var(--white); border-top: 1px solid var(--lgray);
  font: 400 16px/1.3 var(--body);
}
.mode { font-weight: 600; min-width: 92px; }
.hint { margin: 0; }
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.count[hidden] { display: none; }
.sort-note { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.sort-note[hidden] { display: none; }
.linkbtn {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: 600 16px/1.3 var(--body); color: var(--blue); text-decoration: underline; text-underline-offset: 3px;
}
.honest { margin: 0 0 0 auto; }

/* ---------- the grid */
.grid {
  width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  font: 400 16px/1.4 var(--body); color: var(--ink);
}
.grid col.c-rn { width: var(--rn-w); }
.g-offer col.c-a { width: 190px; }
.g-offer col.c-c { width: 150px; }
.g-offer col.c-d { width: 27%; }
.g-offer col.c-e { width: 92px; }
.g-people col.c-pa { width: 300px; }
.g-people col.c-pc { width: 150px; }
.g-people col.c-pd { width: 170px; }
.g-contact col.c-ca { width: 34%; }
.g-contact col.c-cb { width: 28%; }

.grid td, .grid th {
  padding: 9px 12px; text-align: left; vertical-align: top; font-weight: 400;
  border-right: 1px solid var(--lgray); border-bottom: 1px solid var(--lgray);
  background: var(--white);
}
.grid .letters td {
  height: 30px; padding: 0; vertical-align: middle; text-align: center;
  background: var(--lgray); border-right: 1px solid var(--white); border-bottom: 0;
  font: 500 14px/1 var(--body);
}
.grid .letters td.corner { border-right: 1px solid var(--white); }
.grid .rn {
  padding: 12px 0 0; text-align: center; vertical-align: top;
  background: var(--lgray); border-right: 0; border-bottom: 1px solid var(--white);
  font: 500 14px/1.2 var(--body); font-variant-numeric: tabular-nums;
}
.grid .letters td.is-hl, .grid .rn.is-hl { color: var(--red); font-weight: 700; position: relative; }
.grid .letters td.is-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); }
.grid .rn.is-hl::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--red); }

.grid .mission { padding: 14px 18px 16px; }
.mission-v { margin: 0; max-width: 96ch; font: 400 18px/1.5 var(--body); }

.r-head th, .r-sub th { height: 42px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-weight: 600; }
.sort {
  display: inline-flex; align-items: center; gap: 8px; height: 100%;
  border: 0; padding: 0; background: none; cursor: pointer;
  font: 600 16px/1 var(--body); color: var(--ink);
}
.sort-ic { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
[aria-sort="ascending"] .sort-ic { transform: rotate(180deg); }

.row .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; }
.sw-workshop { background: var(--red); }
.sw-conference { background: var(--blue); }
.sw-hackathon { background: var(--orange); }
.sw-forum { background: var(--gold); }
.sw-lecture { background: var(--mblue); }
.sw-talk { background: var(--ink); }
.sw-resource { background: var(--white); border: 1px solid var(--ink); }

.t .tl {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: 500 16px/1.4 var(--body); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
}
.t .tf {
  display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 16px/1.25 var(--saira); font-stretch: 100%;
}
.grid td, .grid th { cursor: cell; }
.grid a, .grid button { cursor: pointer; }
.ask a { display: inline-block; padding: 2px 4px; margin: -2px -4px; }
.rf { margin: 0 0 4px !important; font: 600 20px/1.2 var(--saira); }
.d { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid td.x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid td.x .xv { display: block; overflow: hidden; text-overflow: ellipsis; }
.ask a, .pp a, .ps a, .cm a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }

.freeze-line > td, .freeze-line > th { border-bottom: 2px solid var(--ink); }
.freeze-line > .rn { border-bottom-color: var(--ink); }
.freeze-line.is-open > td, .freeze-line.is-open > th { border-bottom: 1px solid var(--lgray); }
.freeze-line.is-open > .rn { border-bottom-color: var(--white); }
.detail.after-freeze > td { border-bottom: 2px solid var(--ink); }

.pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500 !important; }
.pn img { display: inline-block; width: 32px; height: 32px; margin: -6px 10px -6px 0; vertical-align: middle; }

.blank td { height: 42px; }

/* active cell: 2 px Stevens Red with the fill handle, drawn inside the cell */
.grid .cell.is-active { outline: 2px solid var(--red); outline-offset: -2px; position: relative; z-index: 2; }
.grid .cell.is-active::after {
  content: ""; position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px;
  background: var(--red); border: 1px solid var(--white); z-index: 3;
}
.grid .cell.in-range { position: relative; }
.rg { position: absolute; left: 0; top: 0; right: -1px; bottom: -1px; z-index: 1; pointer-events: none; border: 0 solid var(--red); }
.rg-l > .rg { border-left-width: 2px; }
.rg-r > .rg { border-right-width: 2px; }
.rg-t > .rg { border-top-width: 2px; }
.rg-b > .rg { border-bottom-width: 2px; }
/* as in a sheet, the fill handle sits on the selection's corner, not on the active cell */
.grid .cell.in-range.is-active::after { display: none; }
.rg-end > .rg::after {
  content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px;
  background: var(--red); border: 1px solid var(--white);
}
.js-ready .grid a:focus-visible, .js-ready .grid button:focus-visible, .js-ready .grid .cell:focus-visible { outline: none; }
.grid .cell:focus { outline: none; }
.grid .cell { scroll-margin-top: calc(var(--fx-h) + 12px); scroll-margin-bottom: calc(var(--tabs-h) + var(--status-h) + 12px); }
.grid .cell.is-active:focus, .grid .cell.is-active:focus-within { outline: 2px solid var(--red); outline-offset: -2px; }
.js-ready .grid .det a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* a row opened in place */
.detail .rn { border-bottom: 1px solid var(--lgray); }
.grid .det { padding: 6px 18px 20px; }
.det-in { display: grid; grid-template-columns: minmax(0, 70ch) auto; gap: 18px 40px; align-items: start; }
.det-in p { margin: 0 0 8px; }
.det-who { font-style: italic; }
.det-acts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 2px; }
.det-acts a:not(.btn) { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }

/* ---------- the load moment (overlays are aria-hidden and exist only while it plays) */
html.intro .g-offer .t .tl { opacity: 0; }
html.intro .g-offer .mission-v { clip-path: inset(0 100% 0 0); }
html.intro #fx-text { opacity: 0; }
.fill { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fill > * { position: absolute; left: 0; top: 0; }
.fill-range { border: 2px solid var(--red); border-bottom: 0; }
.fill-edge { height: 2px; background: var(--red); }
.fill-handle { width: 9px; height: 9px; background: var(--red); border: 1px solid var(--white); }
.recalc { border: 1px solid var(--red); }
.a1-edit {
  position: absolute; left: 18px; top: 14px; z-index: 4;
  font: 400 18px/1.5 var(--body); white-space: nowrap;
}
.a1-edit .ch { opacity: 0; }
.detail .det-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .g-offer .t .tl { opacity: 1; }
  html:not(.force-motion) .g-offer .mission-v { clip-path: none; }
  html:not(.force-motion) #fx-text { opacity: 1; }
  html:not(.force-motion) .fill, html:not(.force-motion) .fx-typed, html:not(.force-motion) .a1-edit { display: none; }
  html:not(.force-motion) .detail .det-in { animation: none; transition: none; }
  html:not(.force-motion) { scroll-behavior: auto; }
}
html.motion-off .fill, html.motion-off .fx-typed, html.motion-off .a1-edit { display: none; }

/* ---------- the record below the sheet (Berkshire-plain, dated): shown without JavaScript,
   behind "Show the sheet as a plain list" with it, since the sheet already carries every row */
.record { padding: 0 var(--gut) 24px calc(var(--gut) + var(--rn-w)); }
.list-toggle { margin: 0; padding-top: 22px; }
.list-btn {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 16px/1.3 var(--body); color: var(--red); text-decoration: underline; text-underline-offset: 4px;
}
.rec { padding-top: 76px; scroll-margin-top: 16px; }
.rec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  margin-bottom: 26px; padding-top: 14px; border-top: 2px solid var(--ink);
}
.rec h2, .reach h2 { margin: 0; font: 600 clamp(2rem, 3.4vw, 2.6rem)/1.1 var(--disp); }
.ref { font: 500 16px/1.2 var(--body); color: var(--blue); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.rec-intro { max-width: 65ch; margin: 0 0 30px; font-size: 18px; line-height: 1.55; }
.rec ul { list-style: none; margin: 0; padding: 0; }
.rec h3 { margin: 0 0 10px; font: 600 20px/1.3 var(--body); }
.rec h3 a, .ev-group a, .pp-list h3 a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rec p { margin: 0 0 12px; max-width: 65ch; }
.when { font: 500 16px/1.3 var(--body); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.w-ask a { font-weight: 600; text-underline-offset: 3px; }

.w-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.w-list > li, .ev-feats > li { padding-top: 16px; border-top: 1px solid var(--lgray); }
.ev-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.ev-feat .when { font: 600 26px/1 var(--disp); margin-bottom: 10px; }
.ev-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 52px; }
.ev-group h3 { font-size: 18px; margin-bottom: 4px; }
.ev-group li { padding: 12px 0; border-top: 1px solid var(--lgray); }
.ev-group li .when { display: block; margin: 4px 0 0; }

.pp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.pp-list li { display: flex; gap: 16px; align-items: flex-start; }
.pp-list img { flex: none; width: 72px; height: 72px; display: block; }
.pp-list h3 { font-size: 18px; margin-bottom: 4px; }
.pp-list p { margin: 0 0 4px; font-size: 16px; line-height: 1.45; }
.pl-links a { font-weight: 500; text-underline-offset: 3px; }

.res { max-width: 72ch; }
/* the page ends on the one action: contact sentence, address, button */
.reach { padding: 56px var(--gut) 8px calc(var(--gut) + var(--rn-w)); scroll-margin-top: calc(var(--fx-h) + 16px); }
.ct { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 20px 56px; align-items: start; }
.ct p { margin: 0; max-width: 65ch; }
.ct-text { font-size: 18px; line-height: 1.55; }
.ct-text a { text-underline-offset: 3px; }
.ct address { font-style: normal; line-height: 1.6; }

.foot { margin-top: 64px; border-top: 1px solid var(--lgray); }
.foot-in {
  padding: 34px var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 34px;
}
.foot-mark { width: 188px; height: 50px; display: block; }
.foot-txt p { margin: 0; font-size: 16px; line-height: 1.5; }
.foot-nav { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 16px; }
.foot-nav a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .rec h3 a:hover, .ev-group a:hover, .foot-nav a:hover { color: var(--red); }
  .t .tl:hover .tv { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
  .sort:hover { color: var(--red); }
  .tab:hover:not(.is-on) { background: var(--lblue); }
}

/* ---------- 1180 and under: column D (For whom / what) is hidden, as a sheet hides a column */
@media (max-width: 1180px) {
  .g-offer col.c-d { width: 92px; }
  .g-offer col.c-e { width: 0; }
  .g-offer .x, .g-offer .letters .l-d { display: none; }
  .g-offer .letters td[data-l="E"] { border-left: 3px double var(--ink); }
  .w-list { grid-template-columns: 1fr; gap: 28px; }
  .w-list > li p { max-width: 72ch; }
  .pp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .doc-sub { display: none; }
  .doc h1 { font-size: 26px; }
  .fx { --fxs: 56px; }
  .fx.fx-m { --fxs: 40px; }
  .fx.fx-s { --fxs: 28px; }
  .g-offer col.c-a { width: 160px; }
  .g-offer col.c-c { width: 132px; }
  .ev-groups { grid-template-columns: 1fr 1fr; }
  .ct { grid-template-columns: 1fr; }
}

/* ---------- phones: the sheet becomes a one-column list; the tabs move to the top */
@media (max-width: 640px) {
  :root { --gut: 16px; --fx-h: 56px; }
  body { font-size: 16px; }
  .appbar { min-height: 117px; padding: 0 16px; }
  .mark { margin-right: 34px; }
  .doc h1 { font-size: 20px; line-height: 1.15; }
  .doc h1 .nw { display: block; }
  .bar-mail { display: none; }

  .fxbar { height: var(--fx-h); padding: 0 12px; gap: 8px; }
  .namebox { min-width: 44px; height: 40px; padding: 0 5px 0 7px; font-size: 16px; gap: 3px; }
  .fx-icons { display: none; }
  .fx { padding-left: 4px; }
  .fx { --fxs: 24px; }
  .fx.fx-m { --fxs: 20px; }
  .fx.fx-s { --fxs: 16px; }
  .fx.is-value .fx-text { font-size: 16px; }
  .fx-typed { left: 4px; }
  .fx-mail { display: inline-flex; flex: none; min-height: 44px; padding: 0 12px; font-size: 16px; }
  .ranges { min-width: 280px; }

  .tabs {
    order: 2; position: static; display: grid; grid-template-columns: repeat(3, 1fr);
    height: 40px; margin: 6px 12px 6px; padding: 0;
    border: 1px solid var(--ink); border-radius: 3px; overflow: hidden;
  }
  .tab { justify-content: center; padding: 0; border: 0 !important; border-left: 1px solid var(--ink) !important; }
  .tab:first-child { border-left: 0 !important; }
  .tab.is-on { background: var(--red); color: var(--white); }

  .sheets { order: 3; padding: 0; }
  .sheet-h { margin: 18px 16px 8px; }
  .status { order: 4; position: static; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; }
  .mode, .hint { display: none; }
  .honest { margin: 0; }

  .grid, .grid tbody, .grid tr, .grid td, .grid th { display: block; }
  .grid thead, .grid colgroup { display: none; }
  .grid { border-top: 1px solid var(--lgray); }
  .grid tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); border-bottom: 1px solid var(--lgray); }
  .grid td, .grid th { border: 0; padding: 0; }
  .grid .rn { grid-row: 1 / span 9; padding-top: 14px; font-size: 14px; border: 0; }
  .grid tr > .cell { grid-column: 2; }

  .grid .mission { padding: 8px 14px 10px 10px; }
  .mission-v { font-size: 16px; line-height: 1.45; }

  .g-people .r-head, .g-contact .r-head { display: none; }
  .r-head { grid-template-columns: 28px auto auto 1fr !important; align-items: center; }
  .g-offer .r-head::before { content: "Sort by"; grid-column: 2; grid-row: 1; padding: 0 10px 0 10px; font-size: 16px; }
  .r-head th { display: none; height: auto; }
  .r-head th.h-kind, .r-head th.h-posted { display: block; grid-row: 1; padding: 4px 4px; }
  .r-head th.h-kind { grid-column: 3; }
  .r-head th.h-posted { grid-column: 4; justify-self: start; }
  .r-head .sort { height: 32px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 3px; font-size: 16px; }

  .g-offer tr.row:not(.r-mission):not(.r-head) { grid-template-columns: 28px auto minmax(0, 1fr) auto; }
  .g-offer tr.row:not(.r-mission):not(.r-head) > .cell { grid-column: auto; }
  .g-offer .t { grid-column: 2 / 5 !important; grid-row: 1; padding: 9px 14px 3px 10px; }
  .g-offer .k { grid-column: 2 !important; grid-row: 2; padding: 0 0 9px 10px; font-size: 16px; }
  .g-offer .d { grid-column: 3 !important; grid-row: 2; padding: 0 0 9px 10px; font-size: 16px; text-align: left !important; }
  .g-offer td.x { display: none; }
  .g-offer .ask { grid-column: 4 !important; grid-row: 2; padding: 0 14px 9px 10px; }
  .g-offer .t .tl { display: flex; flex-direction: column; }
  .t .tf { order: -1; margin: 0 0 2px; white-space: normal; line-height: 1.2; }
  .ask a { padding: 4px 6px; margin: -4px -6px; }
  .t .tv { font-weight: 600; font-size: 17px; line-height: 1.32; }
  .sw { margin-right: 7px; }
  .freeze-line, .detail.after-freeze { border-bottom: 2px solid var(--ink) !important; }
  .freeze-line.is-open { border-bottom: 1px solid var(--lgray) !important; }
  .freeze-line > *, .detail.after-freeze > * { border-bottom: 0 !important; }

  .blank { min-height: 40px; }
  .blank td:not(.rn) { display: none; }

  .g-people .pn { padding: 12px 14px 2px 10px; white-space: normal; }
  .g-people .pl { padding: 0 14px 6px 10px; }
  .g-people .pp, .g-people .ps { display: inline-block; }
  .g-people tr.row:not(.r-mission):not(.r-head) { grid-template-columns: 28px auto 1fr; }
  .g-people tr.row:not(.r-mission):not(.r-head) > .pn,
  .g-people tr.row:not(.r-mission):not(.r-head) > .pl { grid-column: 2 / 4; }
  .g-people tr.row:not(.r-mission):not(.r-head) > .pp { grid-column: 2; padding: 0 16px 12px 10px; }
  .g-people tr.row:not(.r-mission):not(.r-head) > .ps { grid-column: 3; padding: 0 16px 12px 0; }
  .g-contact tr.row > .cell { padding: 4px 14px 4px 10px; }
  .g-contact tr.r-person > .cell:first-of-type { padding-top: 12px; }
  .g-contact tr.r-person > .cell:last-child { padding-bottom: 12px; }
  .g-contact tr.r-sub > .cell { padding: 12px 14px 4px 10px; height: auto; }
  .g-contact tr.r-addr > .cell { padding: 3px 14px 3px 10px; }
  .g-contact tr.r-addr .rn { padding-top: 5px; }
  .g-contact td:empty { display: none; }
  .g-contact .cell[data-h]::before {
    content: attr(data-h); display: inline-block; width: 64px; font-size: 16px; font-weight: 600;
  }

  .grid .cell.is-active, .grid .cell.is-active:focus, .grid .cell.is-active:focus-within { outline: none; z-index: auto; }
  .grid .cell.is-active::after { display: none; }
  .grid .rn.is-hl { position: static; border-right: 2px solid var(--red); }
  .grid .rn.is-hl::after { content: none; }
  .grid tr.row-active { position: relative; }
  .grid tr.row-active > .rn::before {
    content: ""; position: absolute; left: 28px; top: 0; right: 0; bottom: 0; z-index: 3;
    border: 2px solid var(--red); pointer-events: none;
  }
  .grid tr.row-active > .rn::after {
    content: ""; position: absolute; left: auto; top: auto; right: 1px; bottom: -4px; z-index: 4;
    width: 8px; height: 8px; background: var(--red); border: 1px solid var(--white); pointer-events: none;
  }
  .rg { display: none; }
  .js-ready .grid .cell a:focus-visible, .js-ready .grid .cell button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .grid .det { grid-column: 2 !important; padding: 2px 14px 16px 10px; }
  .det-in { grid-template-columns: 1fr; }

  .a1-edit { left: 10px; top: 10px; font-size: 16px; }

  .record { padding: 0 16px 16px 38px; }
  .reach { padding: 44px 16px 8px 38px; }
  .rec { padding-top: 56px; }
  .w-list, .ev-feats, .ev-groups, .pp-list { grid-template-columns: 1fr; }
  .ev-groups { gap: 32px; margin-top: 40px; }
  .foot-nav { margin-left: 0; }
}