/* ==========================================================================
   Coffee & Snow — site styles
   Dark editorial layout: near-black ground, orange signal, condensed display.
   ========================================================================== */

/* Variable fonts, latin subset, self-hosted — one file each covers every weight. */
@font-face{font-family:'Oswald';font-weight:200 700;font-style:normal;font-display:swap;src:url('../fonts/oswald-var.woff2') format('woff2')}
@font-face{font-family:'Inter'; font-weight:400 700;font-style:normal;font-display:swap;src:url('../fonts/inter-var.woff2')  format('woff2')}

:root{
	--bg:#070a0e;
	--bg-2:#0a0f15;
	--card:#0d131a;
	--card-2:#111922;
	--raise:#152029;
	--line:rgba(255,255,255,.08);
	--line-2:rgba(255,255,255,.14);

	--cream:#ffffff;   /* headings and emphasis */
	--text:#ffffff;    /* body copy */
	--label:#9daab8;   /* small uppercase labels — deliberately NOT white */
	--dim:#8b98a6;     /* quiet metadata */

	--orange:#ee6c1f;
	--orange-2:#f5913f;
	--orange-dim:rgba(238,108,31,.14);
	--blue:#4f93da;
	--pink:#e86ba6;
	--yellow:#f2b134;
	--rose:#c96a7a;
	--green:#5fae7e;

	/* the one vertical gap between panels, in every zone */
	--panel-gap:clamp(16px,2.2vw,26px);
	--r:14px;
	--r-sm:9px;
	--wrap:1500px;
	--pad:clamp(16px,3.2vw,28px);   /* page gutter — content and banner share it */
	--display:'Oswald','Arial Narrow',system-ui,sans-serif;
	--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
/* the same ground colour on the root, so a short page never shows a seam
   where the body's background box ends */
html{scroll-behavior:smooth;background:var(--bg)}
body{
	margin:0;min-height:100vh;
	background:
		radial-gradient(120% 70% at 78% -6%, rgba(35,52,70,.5), transparent 60%),
		radial-gradient(90% 60% at 0% 10%, rgba(238,108,31,.05), transparent 55%),
		var(--bg);
	color:var(--text);
	font-family:var(--body);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Floor for every inline icon. An SVG with no size takes its intrinsic one and
   renders enormous, which is what a page that forgot to load its stylesheet
   looked like. Every scoped .ico rule below still wins over this. */
.ico{width:1em;height:1em}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0}
button,input{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:10px 16px;background:var(--orange);color:#0b0f14;font-weight:700}
.skip:focus{left:12px;top:12px}

/* dotted decoration used at the hero's left edge */
.dots{
	position:absolute;left:-6px;top:120px;width:64px;height:110px;pointer-events:none;opacity:.5;
	background-image:radial-gradient(var(--orange) 1.4px, transparent 1.5px);
	background-size:13px 13px;
	-webkit-mask-image:linear-gradient(105deg,#000,transparent 78%);
	mask-image:linear-gradient(105deg,#000,transparent 78%);
}

/* ---------- header ---------------------------------------------------- */

.site-head{
	position:sticky;top:0;z-index:40;
	background:rgba(7,10,14,.82);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);min-height:clamp(80px,7vw,96px)}

.brand{display:inline-flex;align-items:center;gap:clamp(14px,1.5vw,20px);flex:none;padding:6px 0}
.brand-mark{display:grid;place-items:center;width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);flex:none}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-mark.sm{width:46px;height:46px}
.brand-name{
	font-family:var(--body);font-weight:700;font-size:clamp(13px,1.4vw,18px);
	letter-spacing:clamp(.1em,.35vw,.2em);text-transform:uppercase;color:var(--cream);white-space:nowrap;
}

/* the header controls, grouped so they sit together rather than being pushed
   apart by .head-in's much larger gap */
.head-tools{flex:none;margin-left:auto;display:flex;align-items:center;gap:9px}
.head-tools .share-btn{margin-left:0}

/* share this page, and the quieter admin link beside it */
.share-btn{
	flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;
	padding:11px 18px;background:transparent;border:1px solid var(--line-2);border-radius:11px;
	color:var(--cream);font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
	cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.share-btn:hover{border-color:var(--orange);background:var(--orange-dim);color:#fff}
.share-btn .ico{width:18px;height:18px;color:var(--orange)}
.share-btn.is-done{border-color:rgba(95,174,126,.55);background:rgba(95,174,126,.12)}
.share-btn.is-done .ico{color:var(--green)}

/* Admin: deliberately quiet, and unlabelled until you are signed in — a public
   header should not advertise where the admin lives. */
.share-btn--icon span{display:none}
.share-btn--icon{padding:11px 13px}
/* who is signed in — quiet, it is a status not a control */
.cas-whoami{
	display:inline-flex;align-items:center;gap:8px;flex:none;
	padding:9px 13px;border-radius:999px;
	background:rgba(255,255,255,.05);border:1px solid var(--line);
	font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--label);white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis;
}
.cas-whoami .ico{width:16px;height:16px;flex:none;color:var(--green)}

/* "Edit page", shown to a signed-in editor who is viewing the public version */
.cas-editbtn{border-color:rgba(238,108,31,.5);color:var(--cream)}
.cas-editbtn .ico{color:var(--orange)}
.cas-editbtn:hover{background:var(--orange-dim);border-color:var(--orange)}

.admin-btn{border-color:var(--line);color:var(--dim)}
.admin-btn .ico{color:var(--dim)}
.admin-btn:hover{border-color:var(--orange);background:var(--orange-dim);color:#fff}
.admin-btn:hover .ico{color:var(--orange)}

/* styled confirmation — never a browser alert */
.toast{
	position:fixed;left:50%;bottom:26px;z-index:60;transform:translate(-50%,14px);
	display:inline-flex;align-items:center;gap:10px;
	padding:12px 20px;border-radius:11px;
	background:rgba(13,19,26,.96);border:1px solid var(--line-2);
	color:var(--cream);font-weight:600;font-size:13.5px;letter-spacing:.04em;
	box-shadow:0 20px 44px -22px rgba(0,0,0,.95);
	opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast[hidden]{display:none}   /* the display rule above would otherwise defeat [hidden] */

/* ---------- hero ------------------------------------------------------ */

/* the hero is capped like every other block — the image stops at 1500 too */
.hero{position:relative;overflow:hidden;width:100%;max-width:var(--wrap);margin:0 auto;min-height:clamp(320px,29vw,470px)}
.hero .wrap{position:relative;z-index:2}
.hero-in{padding:clamp(34px,4.8vw,62px) 0 clamp(26px,3.4vw,42px);max-width:740px}

.eyebrow{
	font-weight:700;font-size:clamp(11px,1.3vw,13px);letter-spacing:.24em;
	text-transform:uppercase;color:var(--label);margin-bottom:clamp(10px,1.6vw,16px);
}
.eyebrow em{font-style:normal;color:var(--orange)}

.hero h1{
	font-family:var(--display);font-weight:700;text-transform:uppercase;
	font-size:clamp(3rem,8.4vw,5.6rem);line-height:.9;letter-spacing:.01em;color:var(--cream);
}
.hero h1 em{font-style:normal;color:var(--orange)}
/* a plain talk puts its whole name in the headline, which is far longer than
   the two-word workshop style the size above was picked for */
.hero h1.hero-h1--name{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.04;text-transform:none;letter-spacing:0}
.hero-sum{
	margin-top:clamp(12px,1.6vw,18px);max-width:26em;
	font-size:clamp(20px,2.6vw,34px);font-weight:600;line-height:1.25;
	letter-spacing:.005em;color:var(--cream);
}

.meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,22px);
	margin-top:clamp(20px,3vw,30px);
}
.meta-i{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cream)}
.meta-i .ico{width:17px;height:17px;color:var(--orange);flex:none}
.meta-sep{width:1px;height:20px;background:var(--line-2)}
/* a divider that lands last on a wrapped line has nothing to divide */
.meta-sep:last-child{display:none}

.hero-media{
	/* sits inside the gutter, so its right edge lines up with the cards below */
	position:absolute;top:0;right:var(--pad);width:54%;height:100%;z-index:1;
	border-radius:var(--r);overflow:hidden;
	/* soften only the slanted cut, along the same angle — the rest stays full strength */
	-webkit-mask-image:linear-gradient(106deg, transparent 2%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 13%, #000 20%);
	mask-image:linear-gradient(106deg, transparent 2%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 13%, #000 20%);
	-webkit-clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
	clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* no overlay — the photo is shown untinted */
.hero-edge{
	position:absolute;top:0;bottom:0;left:18%;width:1px;z-index:2;
	background:linear-gradient(180deg,transparent,rgba(79,147,218,.45),transparent);
	transform:skewX(-14deg);transform-origin:top;
}

/* ---------- panels ---------------------------------------------------- */

.cols{
	display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
	gap:var(--panel-gap);align-items:stretch;
	margin-top:20px;
	padding-bottom:clamp(24px,4vw,44px);
}
/* a talk with only one side's worth of content gets one readable column, not a
   full-width slab beside an empty gap */
.cols--one{grid-template-columns:minmax(0,1fr)}
.cols--one .col-left,.cols--one .col-right{max-width:900px}

.card{
	position:relative;background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
	padding:clamp(18px,2.4vw,28px);
	box-shadow:0 30px 60px -40px rgba(0,0,0,.95);
}

.card-head{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,1.8vw,18px)}
.card-head .ico{width:26px;height:26px;color:var(--orange);flex:none}
.card-head h2{
	font-family:var(--display);font-weight:700;text-transform:uppercase;
	letter-spacing:.06em;font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--cream);white-space:nowrap;
}
.card-head h2.accent{color:var(--orange);letter-spacing:.1em;font-size:clamp(1.05rem,1.9vw,1.25rem)}
.card-head h2.blue{color:var(--blue)}
.card-head h2.green{color:var(--green)}
.hazard{
	flex:1;height:11px;min-width:30px;border-radius:2px;
	background:repeating-linear-gradient(114deg,var(--orange) 0 8px,transparent 8px 15px);
	opacity:.9;
}

/* ---------- agenda ---------------------------------------------------- */

.agenda{list-style:none;margin:0;padding:0}
.agenda li{position:relative}

.ag-block{display:flex;align-items:center;gap:12px;padding:4px 0 12px}
.ag-pill{
	font-weight:700;font-size:12.5px;letter-spacing:.06em;color:var(--orange-2);
	background:var(--orange-dim);border:1px solid rgba(238,108,31,.42);
	border-radius:7px;padding:4px 11px;white-space:nowrap;
}
.ag-label{font-weight:600;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim)}

.ag-break{
	display:flex;align-items:center;gap:12px;padding:11px 0;margin:6px 0;
	border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);
}
.ag-break .ico{width:19px;height:19px;color:var(--orange);flex:none}
/* the break already draws a bottom rule — don't double it with the next row's top rule */
.ag-break + .ag-row{border-top:0}

.ag-row{
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
	padding:11px 8px;border-top:1px solid var(--line);
	border-radius:var(--r-sm);
}
.ag-row .n{
	font-family:var(--display);font-weight:700;font-size:1.28rem;line-height:1;
	color:var(--orange);min-width:26px;font-variant-numeric:tabular-nums;flex:none;
}
.ag-row .t{flex:1 1 auto;min-width:0;font-weight:600;font-size:clamp(14px,1.45vw,15.5px);color:var(--cream)}
.ag-row .t-sub{display:block;font-weight:400;font-size:12.5px;letter-spacing:.02em;color:var(--dim);margin-top:2px}
.ag-time{flex:none;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--orange-2);white-space:nowrap}
.ag-badge{
	display:inline-block;margin-left:9px;vertical-align:middle;
	font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
	color:#10161d;background:var(--orange);border-radius:5px;padding:2px 7px;
}
.ag-row.is-hi{background:rgba(238,108,31,.09);box-shadow:inset 0 0 0 1px rgba(238,108,31,.32);border-top-color:transparent}

/* accordion */
.ag-row.acc{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease}
.ag-row.acc:hover{background:rgba(255,255,255,.035)}
.ag-row.acc:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.chev{
	flex:none;width:18px;height:18px;margin-left:auto;color:var(--dim);
	transition:transform .3s cubic-bezier(.4,.1,.2,1),color .18s ease;
}
.ag-row.acc:hover .chev{color:var(--orange-2)}
.ag-row.is-open .chev{transform:rotate(180deg);color:var(--orange)}
.ag-row .tip{
	flex:0 0 100%;order:9;padding-left:40px;
	font-size:14px;line-height:1.55;color:var(--text);
	max-height:0;overflow:hidden;opacity:0;
	/* Slow enough to read as the row opening rather than snapping. The height
	   leads and the text follows it in, so the words are not sliding while
	   you start reading them. */
	transition:max-height .7s cubic-bezier(.22,.61,.36,1),opacity .45s ease .1s,margin-top .5s ease;
}
.ag-row.is-open .tip{max-height:340px;opacity:1;margin-top:9px}

/* ---------- overview column ------------------------------------------ */

.ov-kicker{font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.ov-body{font-size:15px;line-height:1.62}

.feats{display:flex;flex-direction:column;gap:14px;margin-top:clamp(16px,2.2vw,22px)}
.feat{display:flex;align-items:center;gap:14px}
.feat-ico{
	display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;
	background:var(--raise);border:1px solid var(--line-2);color:var(--cream);
}
.feat-ico .ico{width:20px;height:20px}
.feat-ico.blue {color:var(--blue); border-color:rgba(79,147,218,.4);  background:rgba(79,147,218,.12)}
.feat-ico.rose {color:var(--rose); border-color:rgba(201,106,122,.4); background:rgba(201,106,122,.12)}
.feat-ico.green{color:var(--green);border-color:rgba(95,174,126,.4);  background:rgba(95,174,126,.12)}
.feat-ico.orange{color:var(--orange);border-color:rgba(238,108,31,.4);background:rgba(238,108,31,.12)}
.feat-ico.pink {color:var(--pink); border-color:rgba(232,107,166,.4); background:rgba(232,107,166,.12)}
.feat p{font-size:14.5px;line-height:1.45}

.note{
	margin-top:clamp(16px,2.2vw,22px);padding:clamp(14px,1.8vw,18px);
	border-radius:var(--r-sm);border:1px solid rgba(238,108,31,.35);
	background:rgba(238,108,31,.07);
}
/* A panel carries NO margins of its own — its zone owns the spacing. They used
   to: a .note had a top margin from when it sat inside a card, and the band a
   bottom one, so the same panel was spaced differently depending on where it
   had been dragged to. Every gap between panels is --panel-gap now, wherever
   they are and whether or not one is being dragged. */
[data-zone] > [data-panel]{margin:0}

.note.blue{border-color:rgba(79,147,218,.34);background:rgba(79,147,218,.07)}
.note.green{border-color:rgba(95,174,126,.34);background:rgba(95,174,126,.07)}
.note.pink{border-color:rgba(232,107,166,.34);background:rgba(232,107,166,.07)}
/* the panel icon carries the panel's accent, not the default orange */
.note.blue  .card-head .ico{color:var(--blue)}
.note.green .card-head .ico{color:var(--green)}
.note.pink  .card-head .ico{color:var(--pink)}
.note .card-head{margin-bottom:9px}
.note .card-head .ico{width:22px;height:22px}
.note p{font-size:14px;line-height:1.5}

/* resources: a list of links, or plain rows when nothing is published yet */
.res{list-style:none;margin:0;padding:0}
.res li{border-top:1px dotted rgba(255,255,255,.12)}
.res li:first-child{border-top:0}
.res-row{display:flex;align-items:center;gap:12px;padding:10px 2px}
.res-row .ico{width:18px;height:18px;flex:none;color:var(--pink)}
.res-txt{flex:1 1 auto;min-width:0}
.res-label{display:block;font-weight:600;font-size:14px;color:var(--cream)}
.res-note{display:block;font-size:12.5px;color:var(--dim);margin-top:1px}
.res-go{flex:none;width:16px;height:16px;color:var(--dim);transition:transform .2s ease,color .2s ease}
a.res-row{color:inherit}
a.res-row:hover .res-label{color:#fff}
a.res-row:hover .res-go{color:var(--pink);transform:translateX(3px)}
.res-row.is-soon .res-label{color:var(--text)}

.spec{list-style:none;margin:0;padding:0}
.spec li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px dotted rgba(255,255,255,.12)}
.spec li:first-child{border-top:0}
.spec .k{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* spacer only — the row separators do the work, no dotted leader */
.spec .dotfill{flex:1;height:1px}
.spec .v{font-weight:600;font-size:14px;color:var(--cream);text-align:right}

/* ---------- create / optimize / deploy band --------------------------- */

.pillars{position:relative;
	display:grid;grid-template-columns:repeat(3,1fr);
	margin-bottom:clamp(24px,4vw,44px);
	padding:clamp(18px,2.4vw,28px) clamp(8px,1.4vw,16px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
}
.pillar{position:relative;display:flex;align-items:flex-start;gap:16px;padding:2px clamp(12px,2.2vw,28px)}
.pillar + .pillar::before{
	content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
	background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 9px);
}
.pillar .hexico{width:44px;height:44px;flex:none;color:var(--orange);stroke-width:1.5}
.pillar h3{
	font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
	font-size:clamp(1.05rem,1.9vw,1.35rem);color:var(--cream);margin-bottom:3px;
}
.pillar p{font-size:clamp(13px,1.2vw,14.5px);line-height:1.4;color:var(--text)}

/* ---------- speakers -------------------------------------------------- */

/* each column stacks its own cards */
.col-left,.col-right{display:flex;flex-direction:column;gap:var(--panel-gap);min-width:0}

.speakers{border-color:rgba(95,174,126,.34);background:linear-gradient(165deg,rgba(95,174,126,.09),rgba(95,174,126,.045))}
.speakers .card-head .ico{color:var(--green)}
.card-head h2.pink{color:var(--pink)}
.card-head h2.yellow{color:var(--yellow)}
.card-head h2.green{color:var(--green)}
.hazard.pink{background:repeating-linear-gradient(114deg,var(--pink) 0 8px,transparent 8px 15px)}
.hazard.yellow{background:repeating-linear-gradient(114deg,var(--yellow) 0 8px,transparent 8px 15px)}
.hazard.green{background:repeating-linear-gradient(114deg,var(--green) 0 8px,transparent 8px 15px)}

.speaker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,18px)}
.speaker{
	display:flex;align-items:center;gap:clamp(13px,1.5vw,17px);
	padding:clamp(13px,1.6vw,17px);
	background:rgba(255,255,255,.03);border:1px solid rgba(95,174,126,.22);border-radius:var(--r-sm);
}
.speaker-ava{
	display:grid;place-items:center;width:60px;height:60px;flex:none;overflow:hidden;
	border-radius:50%;background:rgba(95,174,126,.14);border:1px solid rgba(95,174,126,.5);
	font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.04em;color:var(--green);
}
.speaker-ava img{width:100%;height:100%;object-fit:cover}
.speaker-txt{min-width:0}
.speaker-name{
	display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
	letter-spacing:.04em;font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.1;color:var(--cream);
}
.speaker-role{display:block;margin-top:4px;font-weight:600;font-size:13.5px;color:var(--green)}
.speaker-org{display:block;margin-top:2px;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.speaker-bio{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--text)}

/* ---------- archive list --------------------------------------------- */

.talk-list{display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(24px,4vw,44px)}
.talk-card{
	display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
	gap:clamp(14px,2.4vw,26px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
	padding:clamp(16px,2.2vw,24px);
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.talk-card:hover{border-color:rgba(238,108,31,.45);transform:translateY(-2px);box-shadow:0 26px 50px -34px rgba(0,0,0,.95)}
.talk-date{
	display:grid;place-items:center;width:74px;padding:10px 6px;flex:none;
	border:1px solid var(--line-2);border-radius:11px;background:var(--raise);
}
.talk-date .d{font-family:var(--display);font-weight:700;font-size:1.8rem;line-height:1;color:var(--orange)}
.talk-date .m{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.talk-body{display:block;min-width:0}
.talk-ev{display:inline-block;font-weight:700;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);vertical-align:middle}
.talk-name{
	display:block;
	font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
	font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.05;color:var(--cream);margin:6px 0 9px;
}
.talk-card:hover .talk-name{color:#fff}
.talk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;color:var(--text)}
.talk-meta span{display:inline-flex;align-items:center;gap:7px}
.talk-meta .ico{width:15px;height:15px;color:var(--orange);flex:none}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.tag{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px}
.talk-go{display:inline-flex;align-items:center;gap:9px;flex:none;font-weight:700;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.talk-go .ico{width:18px;height:18px;transition:transform .22s ease}
.talk-card:hover .talk-go .ico{transform:translateX(4px)}
.pill-status{
	display:inline-block;font-weight:700;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
	border-radius:999px;padding:3px 10px;margin-right:11px;vertical-align:middle;
}
.pill-status.upcoming{color:var(--orange-2);background:var(--orange-dim);border:1px solid rgba(238,108,31,.42)}
.pill-status.past{color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}

.empty{padding:44px 24px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--dim)}

.back-link{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);transition:color .18s ease}
.back-link:hover{color:var(--orange)}
.back-link .ico{width:16px;height:16px;transform:rotate(180deg)}

/* ---------- newsletter ------------------------------------------------ */

.signup{
	display:grid;grid-template-columns:auto minmax(0,1fr) minmax(280px,.9fr);
	align-items:center;gap:clamp(16px,3vw,32px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
	padding:clamp(18px,2.6vw,30px);
}
.signup-art{
	display:grid;place-items:center;width:96px;height:96px;flex:none;border-radius:50%;
	background:radial-gradient(circle at 50% 45%, rgba(79,147,218,.22), transparent 68%);
}
.signup-art img{width:60px;height:60px;filter:drop-shadow(0 0 10px rgba(110,180,255,.75)) drop-shadow(0 0 26px rgba(79,147,218,.45))}
.signup-copy h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.4rem,2.8vw,1.9rem);color:var(--cream)}
.signup-copy p{margin-top:5px;font-size:14.5px;max-width:34ch}
.signup-form{display:flex;flex-wrap:wrap;gap:0}
.signup-form input{
	flex:1 1 160px;min-width:0;padding:14px 16px;
	background:rgba(5,8,11,.7);border:1px solid var(--line-2);border-right:0;
	border-radius:var(--r-sm) 0 0 var(--r-sm);color:var(--cream);font-size:14.5px;
}
.signup-form input::placeholder{color:var(--dim)}
.signup-form input:focus{outline:none;border-color:var(--orange)}
.signup-form button{
	flex:none;padding:14px 24px;border:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
	background:var(--orange);color:#10161d;font-weight:700;font-size:12.5px;
	letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:background .18s ease;
}
.signup-form button:hover{background:var(--orange-2)}
.signup-msg{flex:1 0 100%;margin-top:9px;font-size:13px;color:var(--orange-2);min-height:1.2em}

/* ---------- footer ---------------------------------------------------- */

/* the footer mug is a white PNG — mask it so it takes the blue-panel gradient */
.site-foot .brand-mark{
	background:linear-gradient(180deg,#616365,#202224);
	-webkit-mask-image:url('../images/icon/coffeeAndSnow_logo.png');
	        mask-image:url('../images/icon/coffeeAndSnow_logo.png');
	-webkit-mask-size:contain;        mask-size:contain;
	-webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
	-webkit-mask-position:center;     mask-position:center;
	/* subtle light edge so the mark reads against the dark ground */
	filter:
		drop-shadow(0 1px 0 rgba(255,255,255,.16))
		drop-shadow(0 -1px 0 rgba(255,255,255,.10))
		drop-shadow(1px 0 0 rgba(255,255,255,.10))
		drop-shadow(-1px 0 0 rgba(255,255,255,.10));
}
.site-foot .brand-mark img{visibility:hidden}
/* wordmark takes the same gradient */
.site-foot .brand-name{
	background:linear-gradient(180deg,#616365,#202224);
	-webkit-background-clip:text;background-clip:text;
	color:transparent;
}

/* no card, no copyright — just the mark, centred */
.site-foot{
	display:flex;justify-content:center;align-items:center;
	margin:0 0 clamp(26px,4vw,44px);
	padding:clamp(14px,2vw,22px);
}
.foot-brand p{margin-top:10px;font-size:13px;line-height:1.5;max-width:30ch;color:var(--dim)}
.foot-connect h3,.foot-legal h3{font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links a{font-weight:600;font-size:13.5px;color:var(--text);transition:color .18s ease}
.foot-links a:hover{color:var(--orange)}

.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:10px;color:var(--text);transition:color .18s ease,border-color .18s ease,background .18s ease}
.socials a:hover{color:var(--orange);border-color:rgba(238,108,31,.5);background:var(--orange-dim)}
.socials .ico{width:19px;height:19px}
.foot-legal .copy{font-size:13px;color:var(--text)}
.legal-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px}
.legal-links a{font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);transition:color .18s ease}
.legal-links a:hover{color:var(--orange)}
.to-top{
	display:grid;place-items:center;width:46px;height:46px;flex:none;align-self:end;
	background:transparent;border:1px solid rgba(238,108,31,.5);border-radius:11px;
	color:var(--orange);cursor:pointer;transition:background .18s ease}
.to-top:hover{background:var(--orange-dim)}
.to-top .ico{width:20px;height:20px}

/* ==========================================================================
   HOMEPAGE
   The hero shell, .wrap, .hazard and .card above are shared; everything below
   is only used by index.php.
   ========================================================================== */

/* the Coffee & Snow mug is a white PNG — on the dark header it needs no mask,
   unlike the footer copy which takes a gradient */
.brand-cas .brand-mark img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* the homepage banner is far wider than the hero panel it sits in, so hold the
   crop to the right where the cup is instead of the shared 58% centre */
.hero-media.home img{object-position:82% 50%}

/* ---------- hero ------------------------------------------------------ */

/* Two long lines, so smaller than a talk page's one-word headline — sized so
   "Real-World Impact." stays on one line inside .hero-in's column.
   Selector must out-specify `.hero h1` above, which is why h1 is named here. */
.hero h1.home-h1{
	font-family:var(--display);font-weight:700;text-transform:uppercase;
	font-size:clamp(2.1rem,5vw,4.4rem);line-height:.98;letter-spacing:.01em;color:var(--cream);
}
.hero h1.home-h1 span,.hero h1.home-h1 em{display:block;font-style:normal}
.hero h1.home-h1 em{color:var(--orange)}

.home-sum{
	margin-top:clamp(14px,1.8vw,20px);max-width:46ch;
	font-size:clamp(15px,1.35vw,17px);line-height:1.6;color:var(--text);
}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.8vw,30px)}
.btn{
	display:inline-flex;align-items:center;gap:10px;
	padding:14px 24px;border-radius:11px;border:1px solid transparent;
	font-weight:700;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
	cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn .ico{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--orange);color:#10161d}
.btn-solid:hover{background:var(--orange-2)}
.btn-ghost{border-color:var(--line-2);color:var(--cream)}
.btn-ghost .ico{color:var(--orange)}
.btn-ghost:hover{border-color:var(--orange);background:var(--orange-dim)}

/* ---------- stat strip ------------------------------------------------ */

.stats{
	display:grid;grid-template-columns:repeat(4,1fr);
	margin-top:clamp(18px,2.4vw,26px);
	padding:clamp(16px,2vw,22px) clamp(6px,1.2vw,14px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
}
.stat{position:relative;display:flex;align-items:center;gap:14px;padding:2px clamp(12px,2vw,26px)}
.stat + .stat::before{
	content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
	background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 9px);
}
.stat-ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:11px;border:1px solid var(--line-2);background:var(--raise);color:var(--cream)}
.stat-ico .ico{width:21px;height:21px}
.stat-ico.orange{color:var(--orange);border-color:rgba(238,108,31,.4);background:rgba(238,108,31,.12)}
.stat-ico.green {color:var(--green); border-color:rgba(95,174,126,.4); background:rgba(95,174,126,.12)}
.stat-ico.blue  {color:var(--blue);  border-color:rgba(79,147,218,.4);  background:rgba(79,147,218,.12)}
.stat-ico.pink  {color:var(--pink);  border-color:rgba(232,107,166,.4); background:rgba(232,107,166,.12)}
.stat-v{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1;color:var(--cream)}
.stat-k{display:block;margin-top:4px;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* ---------- featured talk -------------------------------------------- */

.feature{
	display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
	align-items:center;gap:clamp(16px,2.4vw,30px);
	margin-top:clamp(16px,2.2vw,26px);
	padding:clamp(14px,1.6vw,18px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid rgba(238,108,31,.55);border-radius:var(--r);
	box-shadow:0 30px 60px -42px rgba(0,0,0,.95);
}
.feature-media{border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2)}
.feature-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature-body{padding-right:clamp(0px,1.4vw,18px)}
.feature-kicker{
	display:inline-flex;align-items:center;gap:8px;
	font-weight:700;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--orange);
}
.feature-kicker .ico{width:16px;height:16px}
.feature-title{
	margin-top:10px;
	font-family:var(--body);font-weight:700;letter-spacing:-.01em;
	font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.22;color:var(--cream);
}
.feature-title a{transition:color .18s ease}
.feature-title a:hover{color:var(--orange-2)}
.feature-sum{margin-top:10px;max-width:56ch;font-size:15px;line-height:1.6;color:var(--text)}

/* duration / format / level, shared by the featured block and the grid cards */
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;margin-top:clamp(12px,1.6vw,18px)}
.tmeta-i{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.tmeta-i .ico{width:16px;height:16px;flex:none;color:var(--orange)}

/* ---------- sections ------------------------------------------------- */

.sec{margin-top:clamp(30px,4.4vw,52px)}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,1.8vw,20px)}
.sec-head h2{
	font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
	font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--cream);
}
/* a short marker beside the heading, not the full-width rule the cards use */
.hazard.sm{flex:none;width:clamp(38px,5vw,64px)}

/* ---------- talk grid ------------------------------------------------ */

/* capped columns, so one talk doesn't stretch into a full-bleed slab and
   three still fill the row */
.talk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,440px));gap:clamp(14px,1.8vw,22px);justify-content:start}
.tcard{
	display:flex;flex-direction:column;overflow:hidden;
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
a.tcard:hover{border-color:rgba(238,108,31,.45);transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(0,0,0,.95)}
.tcard-media{position:relative;display:block;overflow:hidden;background:var(--bg-2)}
/* when the talk happened, over the thumbnail's bottom-left corner */
.tcard-date{
	position:absolute;left:11px;bottom:11px;
	display:inline-flex;align-items:center;gap:7px;
	padding:5px 11px;border-radius:8px;
	background:rgba(7,10,14,.8);border:1px solid var(--line-2);backdrop-filter:blur(6px);
	font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream);
}
.tcard-date .ico{width:14px;height:14px;flex:none;color:var(--orange)}
/* a card with no thumbnail carries the same chip at the top of its body */
.tcard-body > .tcard-date{position:static;margin-bottom:10px}
.tcard-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
a.tcard:hover .tcard-media img{transform:scale(1.04)}
.tcard-body{display:block;padding:clamp(15px,1.8vw,20px)}
.tcard-ev{display:block;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.tcard-title{display:block;font-weight:700;font-size:clamp(15px,1.5vw,17px);line-height:1.3;color:var(--cream)}
a.tcard:hover .tcard-title{color:#fff}
.tcard-sum{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--text)}
.tcard .tmeta{padding-top:13px;border-top:1px solid var(--line)}

/* ---------- what I speak about --------------------------------------- */

.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.topic{
	display:flex;align-items:flex-start;gap:16px;
	padding:clamp(16px,2vw,22px);
	background:linear-gradient(165deg,var(--card-2),var(--card));
	border:1px solid var(--line);border-radius:var(--r);
}
.topic-ico{
	display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;
	color:var(--green);border:1px solid rgba(95,174,126,.4);background:rgba(95,174,126,.12);
}
.topic-ico .ico{width:23px;height:23px}
.topic h3{
	font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
	font-size:clamp(1rem,1.8vw,1.2rem);color:var(--green);margin-bottom:5px;
}
.topic p{font-size:14px;line-height:1.5;color:var(--text)}

/* the last homepage block sits above the footer, which brings its own margin */
.sec:last-child{padding-bottom:clamp(10px,1.6vw,18px)}

/* ---------- responsive ------------------------------------------------ */

@media (max-width:1100px){
	.stats{grid-template-columns:repeat(2,1fr);gap:18px 0}
	/* with two per row the third one starts a new row — no divider on its left */
	.stat:nth-child(odd)::before{display:none}
	.topic-grid{grid-template-columns:1fr}
}
@media (max-width:960px){
	.cols{grid-template-columns:1fr}
	.feature{grid-template-columns:1fr}
	.feature-media img{aspect-ratio:16/7}
	.feature-body{padding-right:0}
	.site-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.to-top{grid-column:2;justify-self:end}
	.signup{grid-template-columns:auto minmax(0,1fr)}
	.signup-form{grid-column:1 / -1}
}
@media (max-width:820px){
	.share-btn span{display:none}
	.share-btn{padding:11px 13px}
	/* the name is the point of the chip, so keep it and drop its padding */
	.cas-whoami{padding:8px 10px;font-size:10.5px;letter-spacing:.06em}
	.hero-in{max-width:none;padding-bottom:clamp(20px,3vw,28px)}
	.hero-media{position:relative;width:100%;height:clamp(200px,44vw,300px);-webkit-clip-path:none;clip-path:none;margin-bottom:clamp(18px,3vw,26px)}
	.hero-media::after{background:linear-gradient(0deg,var(--bg) 3%,transparent 46%)}
	.hero-edge{display:none}
	.dots{display:none}
	.pillars{grid-template-columns:1fr;gap:14px}
	.pillar + .pillar::before{display:none}
	.pillar + .pillar{border-top:1px solid var(--line);padding-top:14px}
	.talk-card{grid-template-columns:auto minmax(0,1fr)}
	.talk-go{grid-column:2;justify-self:start}
	.talk-grid{grid-template-columns:minmax(0,1fr)}
	.btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:620px){
	.stats{grid-template-columns:1fr;gap:16px}
	.stat::before{display:none}
	.cta-row{gap:10px}
	.meta-sep{display:none}
	.meta{gap:10px 18px}
	.signup{grid-template-columns:1fr;text-align:center;justify-items:center}
	.signup-copy p{margin-inline:auto}
	.site-foot{grid-template-columns:1fr}
	.to-top{grid-column:1;justify-self:start}
	.ag-row .tip{padding-left:0}
	.talk-card{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- per-panel colours ----------------------------------------
   A panel may override its header, text, background and outline. The values
   arrive as inline custom properties on the panel itself (see cas_panel_style),
   and each rule is GATED on that property being present — [style*="--p-bg"] —
   rather than using a var() fallback. A fallback would have to name a default,
   and the defaults differ per panel type (.card has a gradient, .note a tint):
   naming one here would quietly flatten the other. No property, no rule, theme
   untouched. */
[data-panel][style*="--p-bg"]  {background:var(--p-bg)}
[data-panel][style*="--p-line"]{border-color:var(--p-line)}

/* the band has no .card-head — its headings and hex icons are the header */
[data-panel][style*="--p-head"] .card-head h2,
[data-panel][style*="--p-head"] .card-head .ico,
[data-panel][style*="--p-head"] .pillar h3,
[data-panel][style*="--p-head"] .pillar .hexico,
/* the speaker's role and the monogram are the panel's accent wearing a
   different hat — they were hard-wired green, so a recoloured Speakers
   panel kept two green bits nothing could reach */
[data-panel][style*="--p-head"] .speaker-role,
[data-panel][style*="--p-head"] .speaker-ava{color:var(--p-head)}

/* the striped bar beside the heading: its stripes ARE the accent, and it
   sets `background` (not background-color), so the whole gradient has to
   be restated — a colour override alone would never touch it */
[data-panel][style*="--p-head"] .hazard{
	background:repeating-linear-gradient(114deg,var(--p-head) 0 8px,transparent 8px 15px);
}

/* and the tints that hang off that accent, kept in step with it */
@supports (color:color-mix(in srgb,#000 10%,transparent)){
	[data-panel][style*="--p-head"] .speaker-ava{
		background:color-mix(in srgb,var(--p-head) 14%,transparent);
		border-color:color-mix(in srgb,var(--p-head) 50%,transparent);
	}
	[data-panel][style*="--p-head"] .speaker{
		border-color:color-mix(in srgb,var(--p-head) 22%,transparent);
	}
}

/* :where() keeps the selector's weight on the gate, so this lands just above
   the panel's own text rules rather than out-shouting everything below it. */
[data-panel][style*="--p-text"] :where(p,li,.ov-body,.res-label,.res-note,
.spec .k,.spec .v,.feat p,.ag-label,.t,.t-sub,.tip,.speaker-name){color:var(--p-text)}

/* the talk's own column: the space between the columns block, the band and
   anything after them is the same value again */
#casTalk > .wrap{
	display:flex;flex-direction:column;gap:var(--panel-gap);
	padding-bottom:clamp(24px,4vw,44px);
}
#casTalk > .wrap > .cols{padding-bottom:0}

/* ---------- panels nested inside other panels ---------------------
   A nested panel keeps none of its main-page dimensions: it fills the
   width its parent has and steps its insides down a level. These rules
   live here rather than in edit.css because the nesting is content — a
   visitor sees it, not just the editor. */
.cas-nest{display:flex;flex-direction:column;gap:14px;min-width:0}
.cas-nest:not(:empty){margin-top:var(--panel-gap)}
.cas-nest > [data-panel]{
	width:auto;max-width:100%;min-width:0;margin:0;
	border-radius:var(--r-sm);padding:clamp(12px,1.5vw,16px);
}
/* Spacing steps down inside a nest; TYPE does not. A heading shrunk to fit
   its container stops reading as the same kind of thing it was a moment
   ago, and the panel looks demoted rather than moved. */
.cas-nest .card-head{margin-bottom:8px}
.cas-nest .speaker-grid{grid-template-columns:minmax(0,1fr)}
.cas-nest .pillars{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
.cas-nest .pillar{padding:2px 4px}
.cas-nest .pillar + .pillar::before{display:none}
.cas-nest .pillar .hexico{width:32px;height:32px}
.cas-nest .feats{gap:10px}
.cas-nest .feat-ico{width:34px;height:34px}
.cas-nest [data-panel] img{max-width:100%;height:auto}
.cas-nest .spec .v,.cas-nest .res-label{overflow-wrap:anywhere}