Update README.md

README.md

@@ -6,7 +6,6 @@ colorTo: indigo
 sdk: static
 pinned: false
 ---
-
 <style>
 /* ---------- scoped to .bsh so it can't leak into the README around it ---------- */
 .bsh {
@@ -23,6 +22,12 @@ pinned: false
 --mush:  #b8553a;
 --line:  #8a6a48;
 
+/* --- responsive helpers (no media queries) --- */
+/* Fluid horizontal padding: 22px on narrow, up to 44px on wide */
+--gutter: clamp(22px, 4.5vw, 44px);
+/* 0 below 760px, 1 at and above. Used to hide the seal. */
+--wide: clamp(0px, (100vw - 760px) * 9999, 1px);
+
 max-width: 1000px;
 margin: 0 auto;
 padding: 0;
@@ -46,11 +51,12 @@ inset 0 0 0 9px var(--copper),
 overflow: hidden;
 }
 .bsh * { box-sizing: border-box; }
-.bsh .pad { padding: 36px 44px; }
+.bsh .pad { padding: 36px var(--gutter); }
 
 /* ---------- type ---------- */
 .bsh h1, .bsh h2, .bsh h3 { font-family: Georgia, "Iowan Old Style", serif; color: var(--bark); margin: 0; letter-spacing: -0.01em; }
-.bsh h1 { font-size: 56px; line-height: 0.95; font-weight: 700; }
+/* h1: fluid between 40px and 56px */
+.bsh h1 { font-size: clamp(40px, 7vw, 56px); line-height: 0.95; font-weight: 700; }
 .bsh h2 { font-size: 28px; line-height: 1.1; font-weight: 700; }
 .bsh h3 { font-size: 18px; line-height: 1.2; font-weight: 700; }
 .bsh p  { margin: 0 0 12px 0; }
@@ -64,10 +70,11 @@ overflow: hidden;
 /* ---------- top strip ---------- */
 .bsh .strip {
 display: flex; align-items: center; justify-content: space-between; gap: 24px;
-padding: 14px 44px;
+padding: 14px var(--gutter);
 background: var(--bark);
 color: var(--cream);
 border-bottom: 1px dashed rgba(246,239,225,0.35);
+flex-wrap: wrap;
 }
 .bsh .strip .who { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
 .bsh .strip .who span.caps { color: var(--sun); }
@@ -75,10 +82,10 @@ border-bottom: 1px dashed rgba(246,239,225,0.35);
 .bsh .strip .dates b { color: var(--sun); font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
 
 /* ---------- header ---------- */
-.bsh .header { padding: 44px 44px 28px; position: relative; }
+.bsh .header { padding: 44px var(--gutter) 28px; position: relative; }
 .bsh .header::before {
 content: "";
-position: absolute; left: 44px; right: 44px; bottom: 18px; height: 1px;
+position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; height: 1px;
 background: var(--walnut);
 box-shadow: 0 4px 0 -1px var(--cream), 0 5px 0 -1px var(--walnut);
 }
@@ -86,11 +93,17 @@ box-shadow: 0 4px 0 -1px var(--cream), 0 5px 0 -1px var(--walnut);
 .bsh .eyebrow .dingbat { font-size: 16px; opacity: 0.7; }
 .bsh .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
 .bsh .title-row h1 em { font-style: italic; color: var(--rust); }
+
+/* Seal: visible above 760px, collapsed to a 0×0 point below it.
+   width/height/border collapse together so the dashed border doesn't
+   leave a stray dot, and overflow:hidden clips the absolute pseudos. */
 .bsh .seal {
-width: 110px; height: 110px; flex-shrink: 0;
+width: clamp(0px, (100vw - 760px) * 9999, 110px);
+height: clamp(0px, (100vw - 760px) * 9999, 110px);
+flex-shrink: 0;
 border-radius: 50%;
 background: var(--paper);
-border: 2px dashed var(--walnut);
+border: clamp(0px, (100vw - 760px) * 9999, 2px) dashed var(--walnut);
 box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--copper);
 display: flex; align-items: center; justify-content: center;
 color: var(--bark);
@@ -103,6 +116,7 @@ text-transform: uppercase;
 font-weight: 700;
 transform: rotate(-6deg);
 position: relative;
+overflow: hidden;
 }
 .bsh .seal::before {
 content: "✦"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
@@ -113,7 +127,7 @@ content: "✦"; position: absolute; bottom: 8px; left: 50%; transform: translate
 .bsh .seal .seal-inner { padding: 0 8px; }
 
 /* ---------- section header ---------- */
-.bsh .section { padding: 40px 44px; border-top: 1px solid rgba(138,106,72,0.25); position: relative; }
+.bsh .section { padding: 40px var(--gutter); border-top: 1px solid rgba(138,106,72,0.25); position: relative; }
 .bsh .section.no-rule { border-top: none; }
 .bsh .section-label {
 display: inline-flex; align-items: center; gap: 10px;
@@ -136,7 +150,13 @@ font-size: 17px;
 }
 
 /* ---------- two-track grid ---------- */
-.bsh .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
+/* auto-fit + min(100%, threshold) collapses to 1 column when the row can't
+   hold two tracks at the threshold width. */
+.bsh .tracks {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+gap: 22px; margin-top: 18px;
+}
 .bsh .track {
 background: var(--paper);
 border: 1.5px dashed var(--walnut);
@@ -170,7 +190,11 @@ font-size: 22px; line-height: 1.15; margin-bottom: 8px; color: var(--bark);
 .bsh .track ul li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--copper); font-size: 12px; }
 
 /* ---------- constraints ---------- */
-.bsh .constraints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
+.bsh .constraints {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+gap: 16px; margin-top: 18px;
+}
 .bsh .constraint {
 border: 1.5px solid var(--walnut);
 border-radius: 8px;
@@ -213,7 +237,9 @@ background-position: 0 0, 0 0;
 .bsh .sash::after { bottom: -1px; background: var(--copper); border-radius: 4px 4px 0 0; height: 6px; width: 80px; }
 
 .bsh .badges {
-display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px;
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+gap: 24px 20px;
 margin-top: 8px;
 }
 .bsh .badge {
@@ -285,7 +311,11 @@ border-right: 1px dashed rgba(246,239,225,0.3);
 .bsh .ledger .row .body .desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
 
 /* ---------- resources ---------- */
-.bsh .resources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 14px; }
+.bsh .resources {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+gap: 10px 22px; margin-top: 14px;
+}
 .bsh .resources a {
 display: flex; align-items: center; justify-content: space-between;
 padding: 10px 14px; border: 1px dashed var(--walnut); border-radius: 6px;
@@ -315,8 +345,13 @@ position: relative;
 content: ""; position: absolute; left: 43px; top: 18px; bottom: 18px;
 border-left: 2px dashed var(--copper);
 }
+/* .stop: flex with the Switcher trick on .what so it wraps below pin+when
+   when the row is narrower than ~500px. Pin stays anchored on the trail. */
 .bsh .stop {
-display: grid; grid-template-columns: 76px 160px 1fr; align-items: center; gap: 14px;
+display: flex;
+flex-wrap: wrap;
+align-items: center;
+gap: 4px 14px;
 padding: 10px 6px; border-radius: 6px; position: relative;
 transition: background 0.15s ease;
 }
@@ -329,10 +364,22 @@ box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--copper);
 display: flex; align-items: center; justify-content: center;
 font-family: Georgia, serif; font-weight: 700; color: var(--bark); font-size: 14px;
 margin-left: 19px; position: relative; z-index: 1;
+flex-shrink: 0;
 }
 .bsh .stop:hover .pin { background: var(--sun); }
-.bsh .stop .when { font-style: italic; color: var(--rust); font-size: 14px; }
-.bsh .stop .what { color: var(--bark); }
+.bsh .stop .when {
+flex: 0 1 160px;
+font-style: italic; color: var(--rust); font-size: 14px;
+}
+.bsh .stop .what {
+color: var(--bark);
+flex-grow: 1;
+/* Switcher: when (500px - 100%) is positive (narrow) the basis
+   blows up and .what wraps to its own line; when negative (wide)
+   it clamps and .what sits inline. */
+flex-basis: calc((500px - 100%) * 999);
+min-width: 0;
+}
 .bsh .stop .what b { color: var(--bark); font-weight: 700; }
 .bsh .stop .what .note { display: block; font-size: 13px; color: var(--ink); opacity: 0.85; }
 
@@ -342,12 +389,12 @@ background:
 repeating-linear-gradient(45deg, rgba(58,37,22,0.04) 0 6px, transparent 6px 12px),
 linear-gradient(180deg, #2f1f12, var(--bark));
 color: var(--cream);
-padding: 36px 44px 40px;
+padding: 36px var(--gutter) 40px;
 text-align: center;
 border-top: 6px double var(--copper);
 position: relative;
 }
-.bsh .cta h2 { color: var(--cream); font-size: 38px; }
+.bsh .cta h2 { color: var(--cream); font-size: clamp(28px, 5vw, 38px); }
 .bsh .cta h2 em { color: var(--sun); font-style: italic; }
 .bsh .cta p { color: rgba(246,239,225,0.85); font-size: 16px; max-width: 56ch; margin: 10px auto 22px; }
 .bsh .cta .button {
@@ -369,17 +416,6 @@ box-shadow: 0 6px 0 rgba(0,0,0,0.3);
 .bsh .cta .links a { color: var(--sun); margin: 0 10px; }
 .bsh .cta .placeholder { display: block; margin-top: 10px; font-size: 11px; color: rgba(246,239,225,0.5); font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; }
 
-/* ---------- responsive ---------- */
-@media (max-width: 760px) {
-.bsh .pad, .bsh .header, .bsh .section, .bsh .strip, .bsh .cta { padding-left: 22px; padding-right: 22px; }
-.bsh h1 { font-size: 40px; }
-.bsh .tracks, .bsh .constraints, .bsh .badges, .bsh .resources { grid-template-columns: 1fr; }
-.bsh .stop { grid-template-columns: 76px 1fr; }
-.bsh .stop .when { grid-column: 2; padding-left: 0; }
-.bsh .stop .what { grid-column: 2; }
-.bsh .seal { display: none; }
-}
-
 /* ---------- decorative svg dividers ---------- */
 .bsh .ornament-rule {
 display: flex; align-items: center; gap: 12px;