@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--paper:#f6f6f3;--white:#fff;--ink:#232623;--muted:#70746e;--line:#dfe1da;--accent:#d93c23;--serif:'Libre Caslon Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}button,input,select,textarea{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e56832;outline-offset:4px}button{color:inherit}a{color:inherit}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;border-right:1px solid var(--line);padding:38px 23px;background:#eeefe9;display:flex;flex-direction:column}.logo{font-family:Georgia,serif;text-decoration:none;font-weight:bold;font-size:64px;letter-spacing:-7px;line-height:.9;align-self:flex-start}.logo span{color:var(--accent)}.logo small{display:block;font:12px var(--sans);letter-spacing:3.4px;margin:12px 0 0 8px}.side-rule{width:28px;height:2px;background:var(--accent);margin:36px 0 28px}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:600;margin:0 0 15px}.sidebar>.eyebrow{font-size:12px;letter-spacing:1.3px;color:var(--muted)}nav{display:grid;gap:8px;margin:3px -10px}.nav-item{border:0;background:none;text-align:left;padding:13px 10px;border-radius:5px;font-size:14px;display:flex;gap:10px;align-items:center;white-space:nowrap}.nav-item>span:first-child{font-size:20px;line-height:1}.nav-item.active{background:white;font-weight:600;box-shadow:0 1px 4px #18201406}.nav-mark{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto}.nav-item:not(.active) .nav-mark{display:none}.side-note{margin-top:80px}.little-star{font-size:32px;color:var(--accent)}.side-note p{font:30px/1.2 var(--serif);margin:15px 0}.side-note small,.side-bottom small{font-size:12px;color:var(--muted);line-height:1.7}.side-bottom{margin-top:auto;font-size:13px;padding-top:30px}.lock{margin-right:5px}.side-bottom small{margin-left:19px}.workspace{margin-left:236px}.topbar{height:83px;border-bottom:1px solid var(--line);padding:0 47px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:13px;color:var(--muted)}.breadcrumb span{margin:0 14px;color:#a5a89f}.account{display:flex;align-items:center;gap:12px}.demo{font-size:12px;letter-spacing:1.2px;border:1px solid #cbd0c4;padding:4px 8px;margin-right:14px;color:var(--muted)}.avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;background:#eee8dd;color:#6a4e35}.avatar.dark{background:var(--ink);color:white}.avatar.josee{background:#e4e8f0;color:#4c5979}.avatar.yvan{background:#eadbd5;color:#90513a}.account-name{font-size:13px;font-weight:500}.account-name small{display:block;font-size:12px;font-weight:400;color:var(--muted)}main{max-width:1350px;margin:auto;padding:37px 47px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}.page-heading .eyebrow{font-size:12px;letter-spacing:2px;margin:0 0 9px;color:var(--muted)}h1{font:56px/1.1 var(--serif);margin:0 0 11px;letter-spacing:-1.8px}h1 span{color:var(--accent)}.intro{font-size:14px;color:var(--muted);margin:0}.primary{border:0;background:var(--accent);color:white;font-weight:500;font-size:14px;padding:13px 19px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;box-shadow:0 3px 7px #cc412017;transition:background .2s}.primary:hover{background:#b82b17}.primary>span{font-size:21px;line-height:1}.filterbar{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.filter-heading{font-size:13px;font-weight:600;margin-right:9px}.filterbar select{padding:9px 30px 9px 11px;border:1px solid var(--line);background:var(--white);border-radius:4px;font-size:13px;max-width:200px}.reset{background:transparent;border:0;color:var(--accent);font-size:12px;text-decoration:underline}.feed-top{display:flex;justify-content:space-between;align-items:center;margin-top:27px}.feed-top h2{font-size:15px;font-weight:500;margin:0}.feed-top h2 span{margin-left:7px;background:#e7e9e1;border-radius:4px;padding:2px 6px;font-size:12px;color:var(--muted)}.sort{font-size:12px;color:var(--muted)}.sample-note{font-size:12px;color:var(--muted);margin:6px 0 18px}.feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px;align-items:start}.card{background:white;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:box-shadow .2s,transform .2s;animation:enter .3s ease both}.card:hover{box-shadow:0 5px 20px #172b1810;transform:translateY(-2px)}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.card-main{padding:23px 25px 21px}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.category{font-size:12px;font-weight:700;letter-spacing:1.15px;display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;color:var(--category,#8b583c)}.category:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}.date{font-size:12px;color:var(--muted);white-space:nowrap}.card h3{font:31px/1.12 var(--serif);letter-spacing:-.3px;margin:0 0 13px}.title-button{background:none;border:0;padding:0;text-align:left;font:inherit;letter-spacing:inherit}.title-button:hover{color:var(--accent)}.card p{font-size:14px;line-height:1.7;color:#64685f;margin:0 0 18px}.card .tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.tag{font-size:12px;background:#f5f5f1;border:1px solid #e7e9e1;border-radius:3px;padding:4px 7px;color:#5e6358}.tag:hover{border-color:#929b86}.byline{border-top:1px solid #eeefe9;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.person{display:flex;align-items:center;gap:9px}.person-info{font-size:12px;font-weight:500}.person-info small{display:block;font-size:12px;font-weight:400;color:var(--muted)}.contact{color:#545d4d;font-size:12px;text-decoration:none;background:none;border:none;padding:4px 0}.contact:hover{color:var(--accent)}.card-bottom{padding:11px 25px;display:flex;justify-content:space-between;align-items:center;background:#fcfcfa;border-top:1px solid #eceee7;font-size:12px;color:var(--muted)}.comments-btn{border:0;background:none;font-size:12px;color:#72776b;padding:0}.comments-btn:hover{color:var(--accent)}.card-photo{width:100%;height:203px;object-fit:cover;display:block;filter:saturate(.7)}.photo-wrap{position:relative}.photo-label{position:absolute;bottom:13px;left:20px;background:white;padding:4px 9px;border-radius:3px;font-size:12px;letter-spacing:.5px}.card-photo+.photo-credit{position:absolute;right:7px;bottom:6px;color:white;font-size:12px;text-shadow:0 1px 3px black}.empty{grid-column:1/-1;text-align:center;border:1px dashed #c9cec1;padding:50px 20px;border-radius:5px}.empty h3{font:30px var(--serif);margin:0 0 10px}.endnote{text-align:center;font-size:12px;color:var(--muted);margin:35px 0}.endnote>span{display:block;color:var(--accent);font-size:24px;margin-bottom:6px}footer{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:9px;padding:30px;width:620px;max-width:calc(100vw - 30px);max-height:90dvh;box-shadow:0 20px 80px #18201430;color:var(--ink)}dialog::backdrop{background:#18201466;backdrop-filter:blur(4px)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-header .eyebrow{margin:0;font-size:12px;color:var(--muted)}.close{border:0;background:#f0f1eb;width:32px;height:32px;border-radius:50%;font-size:24px;line-height:1}dialog h2{font:39px/1.1 var(--serif);margin:12px 0 20px}.muted{color:var(--muted);font-size:14px}.tiny{font-size:12px}form label{display:block;font-size:13px;font-weight:500;margin:15px 0}input,textarea,form select{width:100%;display:block;border:1px solid #cfd3c9;border-radius:4px;padding:11px;background:#fcfcfa;margin-top:7px;color:var(--ink)}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.auto-tag{background:#f0f2e9;padding:12px;font-size:12px;color:#5f6956;border-radius:4px;margin:12px 0}.comment-list{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}.comment-list h3{font-size:15px;margin:0 0 15px}.comment{padding:12px 0;border-bottom:1px solid #eee;font-size:14px}.comment strong{display:block;font-size:12px}.comment p{margin:7px 0}.comment button{background:none;border:0;padding:0;color:var(--accent);font-size:12px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:5px;background:var(--ink);color:white;box-shadow:0 4px 20px #2222;font-size:14px;z-index:100;display:none;max-width:90vw}.toast.visible{display:block}.detail-copy{font-size:16px;line-height:1.75}.detail-tagline{font-size:12px;color:var(--muted)}
@media(min-width:1500px){.feed{gap:25px}.card-main{padding:27px 30px}.card h3{font-size:34px}.card p{font-size:16px}.card-photo{height:240px}}
@media(max-width:1100px){.sidebar{width:195px;padding:32px 18px}.workspace{margin-left:195px}.topbar{padding:0 28px}main{padding:30px 28px 0}.nav-item{font-size:12px;gap:7px}.filterbar{gap:8px}.filter-heading{display:none}.filterbar select{max-width:175px}.card-main{padding:20px}.card h3{font-size:28px}h1{font-size:47px}.page-heading{align-items:flex-start}.primary{font-size:13px;padding:12px}.account-name{display:none}.card-bottom{padding:11px 20px}}
@media(max-width:800px){.sidebar{position:relative;width:auto;padding:18px 22px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}.logo{font-size:40px;letter-spacing:-4px}.logo small{font-size:12px;letter-spacing:1.5px;margin:6px 0 0 3px}.sidebar .eyebrow,.side-rule,.side-note,.side-bottom{display:none}nav{display:flex;margin:0;gap:8px}.nav-item{font-size:12px;padding:10px}.nav-mark{display:none}.workspace{margin-left:0}.topbar{height:60px;padding:0 23px}.demo{margin-right:0}.account .avatar{width:27px;height:27px;font-size:12px}main{padding:28px 22px 0}.page-heading{display:block}.page-heading .primary{margin-top:22px}.page-heading .eyebrow{font-size:12px}h1{font-size:49px}.filterbar{flex-wrap:wrap;padding:14px 0}.filterbar label{flex:1;min-width:120px}.filterbar select{width:100%;max-width:none;font-size:12px;padding:10px 20px 10px 8px}.feed{gap:16px}.card-main{padding:19px}.card h3{font-size:27px}.card-photo{height:180px}.card p{font-size:14px}.contact{font-size:12px}.sort{font-size:12px}.card-top{flex-wrap:wrap}.person-info small{font-size:12px}.feed-top h2{font-size:14px}}
@media(max-width:570px){.feed{grid-template-columns:1fr}.nav-item span:first-child{display:none}.nav-item{font-size:12px}.intro{font-size:13px}h1{font-size:43px;letter-spacing:-1.3px}.card h3{font-size:32px}.card-main{padding:23px}.card p{font-size:16px}.card-photo{height:225px}.card-top .category,.date{font-size:12px}.tag{font-size:12px}.person-info{font-size:13px}.person-info small{font-size:12px}.contact,.comments-btn{font-size:12px}.card-bottom{font-size:12px}.sample-note{font-size:12px}.filterbar label:first-of-type{flex-basis:100%}.sort{max-width:105px;text-align:right}footer span{max-width:180px;text-align:right}.form-row{grid-template-columns:1fr;gap:0}dialog{padding:22px}.breadcrumb{font-size:12px}}

/* Comfortable reading sizes across the working surface. */
.card p{font-size:16px}.filterbar select,.filter-heading,.nav-item,.intro,.contact,.comments-btn,form label{font-size:14px}.person-info{font-size:14px}.card-top{align-items:flex-start}.byline{flex-wrap:wrap}.side-rule{margin-top:30px}.sidebar>.eyebrow{font-size:12px}@media(max-width:1100px){.filterbar{flex-wrap:wrap}.filterbar select{max-width:100%}.filterbar label{flex:1;min-width:130px}}@media(max-width:800px){.nav-item{font-size:13px}.page-heading{margin-bottom:24px}.sidebar nav{gap:3px}}
