@font-face{font-family:'P22 Mackinac';src:url('./fonts/P22MackinacPro-Book_25.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'P22 Mackinac';src:url('./fonts/P22MackinacPro-Medium_26.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'P22 Mackinac';src:url('./fonts/P22MackinacPro-MedItalic_18.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'P22 Mackinac';src:url('./fonts/P22MackinacPro-ExtraBold_12.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'P22 Mackinac';src:url('./fonts/P22MackinacPro-ExBoldItalic_17.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap}

:root{--accent:#c84332;--ink:#302b28;--page:#fdfbf7}
#desktop,#preview{background:var(--page);color:var(--ink)}
#desktop h2,#desktop h3,#preview h2,#preview h3,#about-board h2,#about-board h3,.board-heading>span:last-child,.pinned figcaption{font-family:'P22 Mackinac',Georgia,serif;font-weight:500;letter-spacing:-.02em}
#desktop h2,#preview h2,#about-board h2{color:var(--accent)}
#desktop .eyebrow,#preview .eyebrow,#desktop .back,#desktop .project-meta>span,#about-board .note-label,#about-board a{color:var(--accent)}
#desktop aside button.active{background:#c8433214;color:var(--accent)}
#desktop .case-step p,#preview .case-step p{color:var(--ink)}
#desktop button:focus-visible,#about-board a:focus-visible{outline-color:var(--accent)}
#projects button.active{background:var(--accent);border-color:var(--accent)}
#desktop .project-art.sage,#desktop .project-art.clay,#desktop .project-art.cream{background:#eedbd0;color:var(--accent)}
#desktop .badge{color:var(--accent);background:#c8433210}
/* An unframed, interactive vignette on warm drawing paper. */
html,body{background:#fdfbf7!important;color:#493f35}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2395846f' opacity='.16' filter='url(%23n)' d='M0 0h240v240H0z'/%3E%3C/svg%3E")}
#brand{background:transparent!important;border:0!important;color:#493f35!important}#brand small{color:#867a6b!important}.mark{color:#a45d41!important}
#studio-caption{position:fixed;bottom:14%;left:0;width:100%;text-align:center;pointer-events:none;z-index:2;color:#594c3e}
#studio-caption h1{font:500 clamp(21px,2.2vw,32px) 'P22 Mackinac',Georgia,serif;letter-spacing:.02em;margin:0 0 12px}
#studio-caption p{font:12px Georgia,serif;letter-spacing:.12em;color:#938473}
body[data-mode=work] #studio-caption,body[data-mode=about] #studio-caption{display:none}
.room-nav{background:#f6f0e6eb!important;border-color:#d8ccba!important;color:#655747!important;box-shadow:none!important}
footer,footer>span:first-child{color:#958777!important}
@media(max-width:760px){#studio-caption{bottom:19%}#brand{padding:0!important}#studio-caption p{font-size:10px}}/* Static seamless fibers sit behind the transparent 3D canvas. */
body::before{background-image:url('./paper-grain.svg');background-size:384px 384px;background-repeat:repeat;opacity:.44}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 48% 40%,transparent 35%,#b5a18a0c 100%)}
/* Visible paper tooth without covering the interactive scene. */
body::before{background-size:640px 640px;opacity:.72;background-image:url('./paper-grain.svg?v=2')}

body::before{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CjxmaWx0ZXIgaWQ9InBhcGVyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii40MiIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iMTgiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0iZ3JhaW4iLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPgo8ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSJsaW5lYXIiIHNsb3BlPSIuODUiIGludGVyY2VwdD0iLjEyIi8+PGZlRnVuY0cgdHlwZT0ibGluZWFyIiBzbG9wZT0iLjg1IiBpbnRlcmNlcHQ9Ii4xMSIvPjxmZUZ1bmNCIHR5cGU9ImxpbmVhciIgc2xvcGU9Ii44NSIgaW50ZXJjZXB0PSIuMDkiLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWJlcnMiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMDM1IC40MiIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iNyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj4KPHBhdGggZD0iTTAgMGg1MTJ2NTEySDB6IiBmaWx0ZXI9InVybCgjcGFwZXIpIi8+CjxwYXRoIGQ9Ik0wIDBoNTEydjUxMkgweiIgZmlsdGVyPSJ1cmwoI2ZpYmVycykiIG9wYWNpdHk9Ii4xNiIvPgo8L3N2Zz4=')}

body::before{opacity:.32;background-size:480px 480px}

/* A fixed paper-tooth wash on the 3D scene; HTML reading surfaces stay crisp. */
#room{filter:url('#studio-watercolor')}

#clear-monitor{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;filter:none}
body[data-mode=work] #clear-monitor,body[data-mode=about] #clear-monitor{visibility:hidden}

/* Soft paper halo keeps the caption legible over furniture while zooming. */
#studio-caption{isolation:isolate;color:#514438}
#studio-caption::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,96vw);height:145px;background:radial-gradient(ellipse,#fdfbf74d 0%,#fdfbf733 42%,#fdfbf714 62%,#fdfbf700 76%);pointer-events:none}
#studio-caption p{color:#655749;text-shadow:0 1px 2px #fdfbf7}

#studio-caption h1{text-shadow:0 1px 2px #fdfbf7}
/* About page shares the portfolio's type, spacing and warm palette. */
.about-page .case-step{margin-top:40px}.about-page h4{font-family:inherit;font-size:17px;margin:0 0 10px}.about-principles{display:grid;gap:20px;margin-top:24px}.about-principles>div{border-top:1px solid #ded5cd;padding-top:18px}.about-life{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.about-life figure{margin:0}.about-life img{display:block;width:100%;height:270px;object-fit:cover;border-radius:12px}.about-life figcaption{font-size:13px;line-height:1.6;margin-top:10px;color:var(--ink)}@media(max-width:600px){.about-life{grid-template-columns:1fr}.about-life img{height:240px}}

/* Flat About pinboard, sharing content with the room board. */
#content .flat-facts{margin-top:24px;padding:26px 18px;background:#efe9df;border-radius:12px}
#content .flat-facts .pinboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;height:auto;min-height:0;align-items:start}
#content .flat-facts .pinned{position:relative;inset:auto;grid-area:auto;transform:none;min-height:0;height:auto;margin:0;padding:22px;background:#fffdf8;box-shadow:0 2px 6px #503b2410;border:1px solid #e2d9cc;border-radius:2px;overflow:visible}
#content .flat-facts .profile-note{grid-column:1/-1;background:#f4dfbd}
#content .flat-facts .pin{display:none}
#content .flat-facts .note-label{font-size:10px;letter-spacing:.14em;color:#98604e}
#content .flat-facts h2,#content .flat-facts h3{font-size:25px;line-height:1.25;margin:12px 0}
#content .flat-facts p,#content .flat-facts .profile-role{font-size:15px;line-height:1.65;margin:10px 0;color:var(--ink)}
#content .flat-facts figure.pinned{padding:10px 10px 18px}
#content .flat-facts img{display:block;width:100%;height:230px;object-fit:cover;border-radius:0}
#content .flat-facts figcaption{padding:14px 6px 0;font-size:18px;line-height:1.4}
#content .flat-facts figcaption small{display:block;font-size:13px;line-height:1.6;margin-top:6px}
#content .flat-facts .explore-note{background:#f0e5d8}
@media(max-width:600px){#content .flat-facts .pinboard-grid{grid-template-columns:1fr}#content .flat-facts{padding:14px}#content .flat-facts img{height:210px}}

#desktop aside button[data-view]{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:16px;letter-spacing:0}
#desktop aside .nav-icon{display:block;width:18px;height:18px;flex:0 0 18px}
body[data-mode=work] #brand{color:#fff8ee!important;text-shadow:0 1px 4px #241b15a0}
body[data-mode=work] #brand small{color:#e7d9c7!important}
body[data-mode=work] #brand .mark{color:#f5c7a4!important}