/* Self-hosted so the browser does not have to hit Google (DNS, TLS, fetch the CSS, then fetch the fonts) before it can paint in the right typeface. Variable files, latin subset only, preloaded from the of every page. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/playfair.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/playfair-italic.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/assets/fonts/jost.woff2') format('woff2'); } /* The Agent Edge Live — attendee prompt pages. Palette and type lifted from agent-edge-live.netlify.app so the two sites read as one event. */ :root { --cream: #f5f1ea; --paper: #fffdf9; --ink: #2c3a40; --slate: #5b7480; --deep: #3e5761; --rule: rgba(44, 58, 64, 0.14); --rule-soft: rgba(44, 58, 64, 0.08); --hand: #8a6f52; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Jost', system-ui, -apple-system, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* faint paper grain, same trick the event site uses */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.32; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .page { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* A flex item's min-width defaults to auto, so it refuses to shrink below its content. The 9x9 board is 940px wide, which pushed the whole page out to 980 on a phone and scrolled the body sideways instead of scrolling the board inside its own container. */ .page > * { min-width: 0; } a { color: inherit; } /* ---------- masthead bar ---------- */ .bar { background: var(--deep); color: var(--paper); padding: 17px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wordmark { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase; text-decoration: none; color: var(--paper); } .wordmark em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; margin-left: 3px; } .bar .back { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; color: rgba(255, 253, 249, 0.78); border-bottom: 1px solid rgba(255, 253, 249, 0.32); padding-bottom: 2px; transition: color 0.16s ease, border-color 0.16s ease; } .bar .back:hover { color: var(--paper); border-color: var(--paper); } /* ---------- shared type ---------- */ .wrap { max-width: 820px; margin: 0 auto; padding: 0 28px; } /* the speaker pages have no footer, so the container carries the closing space */ .wrap--narrow { max-width: 700px; padding-bottom: 96px; } .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--slate); margin: 0; } h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(44px, 8vw, 82px); line-height: 1.03; letter-spacing: -0.012em; margin: 18px 0 0; text-wrap: balance; } h1 em { font-style: italic; } h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 14px; text-wrap: balance; } .lede { font-size: 19px; line-height: 1.6; color: rgba(44, 58, 64, 0.82); max-width: 56ch; margin: 22px 0 0; } .meta-line { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--slate); margin: 30px 0 0; } .meta-line span { margin: 0 10px; opacity: 0.5; } /* ---------- home hero ---------- */ .hero { padding: 84px 0 68px; text-align: center; } .hero .lede { margin-left: auto; margin-right: auto; } /* ---------- speaker cards ---------- */ /* With the section heading gone the old fixed top padding read as a void under the bar, and the short page left dead space at the bottom. Centring the block in whatever room is left balances both ends at any viewport height. */ .pick { flex: 1; display: flex; align-items: center; padding: 56px 0; } .pick .wrap { width: 100%; } /* the section label is the page's only heading now, so it carries the h1 */ .pick h1.eyebrow { font-family: 'Jost', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; line-height: 1.5; text-transform: uppercase; color: var(--slate); text-align: center; margin: 0 0 34px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 34px 32px 30px; text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .card:hover { transform: translateY(-3px); border-color: var(--slate); box-shadow: 0 10px 26px rgba(44, 58, 64, 0.09); } .card:focus-visible { outline: 2px solid var(--slate); outline-offset: 4px; } .card .slot { font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--slate); margin: 0 0 18px; } .card-head { display: flex; align-items: center; gap: 17px; margin-bottom: 26px; } .avatar { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 50%; object-fit: cover; border: 3px solid #e9e2d3; background: #e9e2d3; display: block; } .card:hover .avatar { border-color: var(--slate); } /* fluid so the names stay on one line through the tablet range, where the two cards get narrow enough to break "Jordan Nutter" across two lines */ .card .name { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(21px, 2.35vw, 28px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 3px; } .card .tool { display: flex; align-items: center; gap: 7px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.2; color: var(--slate); margin: 0; } /* tool marks: a 3x3 grid for the 9x9 tool, a fingerprint for the unfair advantage */ .tool-icon { width: 17px; height: 17px; flex: 0 0 17px; display: block; color: var(--slate); } /* Both marks carry padding inside their 24-unit viewBox, so the drawn edge sits inset from the box edge. Pull each back by its own inset so the artwork lines up flush with the headline below it. Grid art starts at x=2.15, fingerprint at x=1.15. */ .tool-icon--lg { width: 38px; height: 38px; flex: 0 0 38px; margin-bottom: 20px; color: var(--slate); } .tool-icon--lg.tool-icon--grid { margin-left: -3.4px; } .tool-icon--lg.tool-icon--print { margin-left: -1.8px; } .tool-icon--cross { width: 26px; height: 26px; flex: 0 0 26px; color: var(--slate); } .card .go { margin-top: auto; font-size: 13px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); border-top: 1px solid var(--rule); padding-top: 16px; } .card .go::after { content: " \2192"; transition: margin 0.18s ease; } .card:hover .go::after { margin-left: 5px; } /* ---------- tool cards: the tool is the headline, the speaker is the byline ---------- */ .card--tool { padding: 32px 30px 26px; gap: 0; } .tool-icon--mark { width: 30px; height: 30px; flex: 0 0 30px; color: var(--slate); margin-bottom: 20px; } /* pull each mark's own viewBox padding back so it aligns with the tool name below */ .tool-icon--mark.tool-icon--grid { margin-left: -2.7px; } .tool-icon--mark.tool-icon--print { margin-left: -1.4px; } .tool-name { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 2.5vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; } .byline { display: flex; align-items: center; gap: 11px; margin-top: 16px; margin-bottom: 26px; font-size: 15px; color: var(--slate); } .byline img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; border: 2px solid #e9e2d3; background: #e9e2d3; display: block; } .card:hover .byline img { border-color: var(--slate); } /* ---------- Ohtani grid page ---------- */ .wrap--wide { max-width: 1120px; padding-bottom: 96px; } .grid-head { padding: 64px 0 34px; } .grid-head h1 { font-size: clamp(34px, 5vw, 54px); margin: 0 0 18px; } .grid-head .tool-blurb { margin: 0; max-width: 66ch; } .board-scroll { overflow-x: auto; padding-bottom: 10px; } .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-width: 940px; } /* opacity is declared rather than left at its initial value: Safari will not animate a transition whose start value was never specified, so without this the dimming snapped. */ .gblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; opacity: 1; transition: opacity 0.14s ease; } .gcell { display: flex; align-items: center; justify-content: center; min-height: 78px; padding: 10px 9px; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; opacity: 1; transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.14s ease; } .gcell .en { font-size: 12.5px; line-height: 1.36; font-weight: 500; } .gcell--goal { background: var(--deep); border-color: var(--deep); } .gcell--goal .en { color: var(--paper); font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 600; line-height: 1.2; } .gcell--hub { background: var(--slate); border-color: var(--slate); } .gcell--hub .en { color: var(--paper); font-weight: 600; font-size: 13.5px; } .gcell--pillar { background: #e9e2d3; border-color: rgba(44, 58, 64, 0.18); } .gcell--pillar .en { font-weight: 600; } .gcell--pillar, .gcell--hub { cursor: pointer; } .gcell--pillar:hover, .gcell--hub:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(44, 58, 64, 0.14); } .gcell:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; } .board.is-focused .gblock { opacity: 0.22; } .board.is-focused .gblock.is-lit { opacity: 1; } .board.is-focused .gblock--centre { opacity: 1; } .board.is-focused .gblock--centre .gcell { opacity: 0.22; } .board.is-focused .gblock--centre .gcell.is-lit, .board.is-focused .gblock--centre .gcell--goal { opacity: 1; } /* What you just clicked snaps to full straight away; only the dimming eases. Fading both directions at once read as lag when switching between pillars. */ .board.is-focused .gblock.is-lit, .board.is-focused .gcell.is-lit { transition-duration: 0s; } .intake-box { background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 26px 28px; max-width: 760px; } .intake-label { display: block; font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; } #paste { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--cream); border: 1px solid var(--rule); border-radius: 2px; padding: 14px 15px; resize: vertical; } #paste:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; } .intake-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; } .intake-error { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ochre, #b0442a); flex: 1; min-width: 220px; } .board-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 18px 0 0; } /* above the grid, where a phone user will actually reach it */ .board-actions--top { margin: 0 0 22px; } .download { font-family: 'Jost', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--paper); background: var(--deep); border: 1px solid var(--deep); border-radius: 2px; padding: 15px 34px; cursor: pointer; transition: background 0.16s ease; } .download:hover { background: var(--ink); border-color: var(--ink); } .download:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; } .download:disabled { opacity: 0.6; cursor: default; } .board-note { font-size: 13.5px; color: var(--slate); margin: 0; flex: 1; min-width: 240px; } .grid-notes, .sources { margin: 52px 0 0; max-width: 66ch; } .grid-notes h2, .sources h2 { font-size: 22px; margin: 0 0 12px; } .grid-notes p, .sources p { margin: 0 0 14px; font-size: 16px; line-height: 1.62; color: rgba(44, 58, 64, 0.8); } .grid-notes strong { color: var(--ink); font-weight: 600; } .sources { font-size: 15px; } .sources a { color: var(--deep); } .wrap--wide .cause-card { margin-top: 56px; } @media (max-width: 700px) { .grid-head { padding: 34px 0 26px; } .grid-notes, .sources { margin-top: 40px; } } /* ---------- cause card, sits full width under the two speakers ---------- */ .cause-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--deep); border: 1px solid var(--deep); border-radius: 2px; padding: 30px 32px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .cause-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(44, 58, 64, 0.18); } .cause-card:focus-visible { outline: 2px solid var(--slate); outline-offset: 4px; } .cause-text { font-size: 16px; line-height: 1.55; color: rgba(255, 253, 249, 0.86); max-width: 52ch; } .cause-cta { flex: 0 0 auto; padding: 12px 32px; font-size: 13px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--deep); background: var(--paper); border: 1px solid var(--paper); border-radius: 2px; transition: background 0.16s ease, border-color 0.16s ease; } .cause-card:hover .cause-cta { background: #ffffff; border-color: #ffffff; } /* on the speaker pages the card is not part of the arrow chain, so it stands apart */ .wrap--narrow .cause-card { margin-top: 52px; } /* ---------- speaker page ---------- */ /* the title now sits inside the white instructions box, above a dividing rule */ .speaker-head { padding: 0; } .speaker-head h1 { font-size: clamp(29px, 4.2vw, 42px); margin: 0; } .speaker-head .byline { margin: 20px 0 0; font-size: 16.5px; } .speaker-head .byline img { width: 38px; height: 38px; flex: 0 0 38px; } .tool-blurb { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: rgba(44, 58, 64, 0.78); max-width: 56ch; } .tool-blurb a { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-firm); transition: text-decoration-color 0.16s ease; } .tool-blurb a:hover { text-decoration-color: var(--deep); } .talk-title { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(21px, 2.8vw, 27px); color: var(--slate); margin: 12px 0 0; } .steps-box { background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 38px 36px 34px; margin: 64px 0 0; } .down-arrow { text-align: center; font-size: 28px; line-height: 1; color: var(--slate); margin: 30px 0; } .steps { list-style: none; counter-reset: step; margin: 30px 0 0; padding: 30px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 18px; } .steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; font-size: 16.5px; } .steps li::before { content: counter(step, decimal-leading-zero); font-family: 'Playfair Display', Georgia, serif; font-size: 25px; font-weight: 600; color: var(--slate); line-height: 1.12; font-variant-numeric: tabular-nums; } .steps li.step-copy { align-items: center; } .steps li.step-copy::before { line-height: 1; } .steps li.step-copy .copy { justify-self: start; } .steps strong { font-weight: 600; } /* ChatGPT / Claude links in step 02. Inline, not inline-flex: an inline-flex box has no usable baseline, which is what made the marks sit off the line. Sizing in em keeps them locked to the text. */ .ai { color: inherit; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-firm); transition: color 0.16s ease, text-decoration-color 0.16s ease; } .ai:hover { color: var(--deep); text-decoration-color: var(--deep); } .ai:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 1px; } /* Each mark's viewBox is cropped to its own artwork, so sizing by height alone makes both render at exactly the same optical height. Width follows the true aspect: the ChatGPT knot is wider than tall, the Claude mark is square. */ .brand { display: inline-block; height: 1.02em; width: auto; vertical-align: -0.15em; margin-right: 0.32em; color: currentColor; } .pro-tip { margin: 26px 0 0; padding: 16px 18px; background: var(--cream); border-radius: 2px; font-size: 15px; line-height: 1.55; color: rgba(44, 58, 64, 0.82); } .pro-tip-label { display: inline; font-size: 11.5px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--slate); margin-right: 9px; } /* ---------- prompt block ---------- */ .prompt-wrap { margin: 40px 0 0; } .prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .prompt-label { font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--slate); } .copy { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; color: var(--paper); background: var(--slate); border: 1px solid var(--slate); border-radius: 2px; padding: 12px 30px; cursor: pointer; transition: background 0.16s ease; } .copy:hover { background: var(--deep); border-color: var(--deep); } .copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .copy.done { background: var(--ink); border-color: var(--ink); } pre.prompt { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--slate); border-radius: 2px; padding: 28px 30px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.72; white-space: pre-wrap; overflow-x: auto; color: rgba(44, 58, 64, 0.92); } /* ---------- contact ---------- */ .contact { margin: 0; background: var(--deep); color: var(--paper); border-radius: 2px; padding: 40px 38px; } .contact-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; } .contact-head .avatar { border-color: rgba(255, 253, 249, 0.28); background: rgba(255, 253, 249, 0.1); } .contact h2 { color: var(--paper); margin: 0; } .contact .role { font-size: 15.5px; color: rgba(255, 253, 249, 0.75); margin: 0 0 24px; max-width: 48ch; } .contact dl { margin: 0; display: grid; grid-template-columns: 108px 1fr; gap: 12px 18px; align-items: baseline; } .contact dt { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 253, 249, 0.6); } .contact dd { margin: 0; font-size: 16.5px; } .contact dd a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255, 253, 249, 0.35); padding-bottom: 1px; transition: border-color 0.16s ease; } .contact dd a:hover { border-color: var(--paper); } .contact dd.states { display: flex; flex-wrap: wrap; gap: 7px; } .st { font-size: 12px; font-weight: 500; letter-spacing: 1.3px; line-height: 1; padding: 6px 9px 5px; border: 1px solid rgba(255, 253, 249, 0.3); border-radius: 2px; color: rgba(255, 253, 249, 0.78); } .st.is-ga { background: var(--paper); border-color: var(--paper); color: var(--deep); font-weight: 600; } .extra { margin: 40px 0 0; padding: 26px 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; font-size: 15.5px; line-height: 1.6; } .extra a { color: var(--deep); } /* ---------- cross-link to the other speaker ---------- */ .cross { display: flex; align-items: center; gap: 16px; margin: 0; padding: 26px 30px; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease; } .cross:hover { transform: translateY(-2px); border-color: var(--slate); } .cross:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; } .cross-body { display: flex; flex-direction: column; } .cross-title { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .cross .byline { margin: 8px 0 0; font-size: 14.5px; } .cross .byline img { width: 26px; height: 26px; flex: 0 0 26px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (max-width: 560px) { body { font-size: 16px; } .hero { padding: 56px 0 48px; } .wrap { padding: 0 20px; } .wrap--narrow { padding-bottom: 72px; } .contact { padding: 32px 24px; } .contact dl { grid-template-columns: 1fr; gap: 4px 0; } .contact dt { margin-top: 12px; } pre.prompt { padding: 22px 20px; font-size: 13px; } /* the bar has two long uppercase labels; shrink both so neither wraps */ .bar { padding: 15px 20px; gap: 10px; } .wordmark { font-size: 11.5px; letter-spacing: 1.8px; white-space: nowrap; } .wordmark em { font-size: 15px; } .bar .back { font-size: 11px; letter-spacing: 1px; white-space: nowrap; } /* give the step text back the width the number column was taking */ .steps-box { padding: 28px 22px 26px; margin-top: 34px; } .steps li { grid-template-columns: 30px 1fr; gap: 12px; } .steps li::before { font-size: 20px; } .steps { gap: 22px; } /* no heading sits under the bar, so the gap only needs to read as a margin */ .pick { padding: 26px 0 52px; } .card { padding: 28px 24px 26px; } .cross { padding: 22px 24px; } /* stack the cause card so the button is not squeezed against the text */ .cause-card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 24px; } .cause-cta { align-self: stretch; text-align: center; } }