About — Form & Frequency Studio
:root{
–ink:#0a0a0a;
–panel:#141414;
–panel-2:#101010;
–gold:#f2f2f2;
–gold-dim:#8c8c8c;
–parchment:#f2f2f2;
–parchment-dim:#a3a3a3;
–rust:#c9c9c9;
–line: rgba(255,255,255,0.14);
–hair: rgba(255,255,255,0.4);
–watermark: rgba(255,255,255,0.045);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(–ink);
color:var(–parchment);
font-family:’Spectral’, serif;
font-weight:300;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1, h2, h3, .display{
font-family:’Cormorant Garamond’, serif;
font-weight:500;
letter-spacing:0.01em;
margin:0;
}
.wrap{
max-width:1180px;
margin:0 auto;
padding:0 40px;
}
/* ———- NAV ———- */
nav{
position:relative;
z-index:5;
padding:34px 0 0;
}
nav .wrap{
display:flex;
justify-content:space-between;
align-items:baseline;
flex-wrap:wrap;
gap:16px;
}
.brandmark{
font-family:’Cormorant Garamond’, serif;
font-size:1.55rem;
font-weight:600;
color:var(–parchment);
text-decoration:none;
letter-spacing:0.03em;
}
.brandmark em{
font-style:italic;
color:var(–gold);
}
.navlinks{
display:flex;
gap:34px;
list-style:none;
margin:0;
padding:0;
}
.navlinks a{
text-decoration:none;
font-size:0.9rem;
font-variant:small-caps;
letter-spacing:0.06em;
color:var(–parchment-dim);
border-bottom:1px solid transparent;
padding-bottom:3px;
transition:color .2s ease, border-color .2s ease;
}
.navlinks a:hover,
.navlinks a[aria-current=”page”]{
color:var(–gold);
border-color:var(–gold-dim);
}
/* ———- PAGE HEADER (non-hero pages) ———- */
header.page-head{
padding:70px 0 60px;
border-bottom:1px solid var(–line);
}
header.page-head .kicker{
font-family:’Cormorant Garamond’, serif;
font-style:italic;
font-size:1.05rem;
color:var(–gold-dim);
letter-spacing:0.02em;
margin-bottom:18px;
}
header.page-head h1{
font-size:3.8rem;
line-height:1.04;
color:var(–parchment);
max-width:16ch;
}
header.page-head p{
margin-top:26px;
font-size:1.1rem;
color:var(–parchment-dim);
max-width:56ch;
}
/* ———- HERO (home page) ———- */
header.hero{
padding:64px 0 100px;
position:relative;
overflow:hidden;
}
header.hero::before{
content:”&”;
position:absolute;
top:-14rem;
left:-3rem;
font-family:’Cormorant Garamond’, serif;
font-style:italic;
font-weight:500;
font-size:52rem;
line-height:1;
color:var(–watermark);
pointer-events:none;
z-index:0;
user-select:none;
}
.hero-grid{
display:grid;
grid-template-columns:0.92fr 1.28fr;
gap:56px;
align-items:center;
position:relative;
z-index:1;
}
.hero-text .kicker{
font-family:’Cormorant Garamond’, serif;
font-style:italic;
font-size:1.05rem;
color:var(–gold-dim);
letter-spacing:0.02em;
margin-bottom:20px;
}
.hero-text h1{
font-size:4.4rem;
line-height:1.0;
color:var(–parchment);
}
.hero-text h1 .amp{
color:var(–gold);
font-style:italic;
font-size:1.1em;
}
.hero-text p{
margin-top:26px;
font-size:1.08rem;
color:var(–parchment-dim);
max-width:38ch;
}
.hero-cta{
margin-top:36px;
display:flex;
gap:26px;
align-items:center;
flex-wrap:wrap;
}
.btn{
display:inline-block;
padding:13px 26px;
border:1px solid var(–gold);
color:var(–gold);
text-decoration:none;
font-family:’Spectral’, serif;
font-size:0.95rem;
letter-spacing:0.02em;
border-radius:2px;
transition:background .2s ease, color .2s ease;
}
.btn:hover{
background:var(–gold);
color:var(–ink);
}
.hero-cta .secondary{
font-size:0.92rem;
color:var(–parchment-dim);
text-decoration:none;
border-bottom:1px solid var(–line);
}
.hero-photo{
position:relative;
}
.hero-photo img{
width:100%;
display:block;
border-radius:26px;
border:1px solid var(–gold-dim);
}
.hero-photo .caption{
margin-top:18px;
text-align:center;
font-family:’Cormorant Garamond’, serif;
font-size:1.05rem;
letter-spacing:0.34em;
color:var(–gold);
}
/* ———- SECTION SHELL ———- */
section{
padding:86px 0;
border-top:1px solid var(–line);
}
section:first-of-type{
border-top:none;
}
.section-head{
display:grid;
grid-template-columns:1fr 2fr;
gap:40px;
margin-bottom:52px;
}
.section-head h2{
font-size:2.5rem;
color:var(–parchment);
}
.section-head .lead{
color:var(–parchment-dim);
font-size:1.02rem;
max-width:52ch;
}
/* ———- ABOUT (home page teaser) ———- */
#about{
background:var(–panel);
}
.about-grid{
display:grid;
grid-template-columns:1.5fr 1fr;
gap:64px;
}
.about-grid p{
color:var(–parchment-dim);
font-size:1.02rem;
margin:0 0 20px;
}
.about-grid p:first-child{
color:var(–parchment);
font-size:1.12rem;
}
blockquote{
position:relative;
margin:0;
padding-left:34px;
border-left:1px solid var(–hair);
font-family:’Cormorant Garamond’, serif;
font-style:italic;
font-weight:400;
font-size:2rem;
line-height:1.32;
color:var(–parchment);
}
blockquote::before{
content:”“”;
position:absolute;
left:22px;
top:-0.4em;
font-size:2.2em;
color:var(–gold-dim);
font-style:normal;
}
blockquote span{
display:block;
margin-top:20px;
font-family:’Spectral’, serif;
font-style:normal;
font-size:0.85rem;
letter-spacing:0.02em;
color:var(–parchment-dim);
}
/* ———- SERVICES : console strip ———- */
.strip{
border-top:1px solid var(–line);
}
.channel{
display:grid;
grid-template-columns:120px 1fr 1.4fr;
gap:32px;
align-items:start;
padding:30px 0;
border-bottom:1px solid var(–line);
}
.channel .tag{
font-family:’Cormorant Garamond’, serif;
font-size:0.95rem;
letter-spacing:0.12em;
color:var(–gold-dim);
padding-top:4px;
}
.channel h3{
font-size:1.7rem;
color:var(–parchment);
font-weight:500;
}
.channel p{
margin:0 0 10px;
color:var(–parchment-dim);
font-size:0.98rem;
}
.channel .fine{
margin:0;
font-size:0.86rem;
color:var(–gold-dim);
}
/* ———- GEAR ———- */
#gear{
background:var(–panel);
}
.gear-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
}
.gear-columns h3{
font-size:1.1rem;
color:var(–gold);
font-weight:500;
letter-spacing:0.03em;
margin-bottom:18px;
padding-bottom:10px;
border-bottom:1px solid var(–line);
}
.gear-columns ul{
list-style:none;
margin:0;
padding:0;
}
.gear-columns li{
display:flex;
justify-content:space-between;
gap:16px;
padding:10px 0;
border-bottom:1px dotted var(–line);
color:var(–parchment-dim);
font-size:0.96rem;
}
.gear-columns li span:last-child{
color:var(–parchment);
text-align:right;
}
.gear-columns li .filler{
color:var(–gold-dim);
font-style:italic;
}
.gear-note{
margin-top:48px;
padding-top:24px;
border-top:1px solid var(–line);
color:var(–parchment-dim);
font-size:0.92rem;
max-width:64ch;
}
/* ———- TWO-TRACK CARDS (about page) ———- */
.track-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:var(–line);
border:1px solid var(–line);
}
.track{
background:var(–ink);
padding:44px;
}
#about-hero + section .track{
background:var(–panel);
}
.track .tag{
font-size:0.85rem;
letter-spacing:0.1em;
color:var(–gold-dim);
margin-bottom:14px;
}
.track h3{
font-size:1.95rem;
color:var(–parchment);
margin-bottom:16px;
}
.track p{
color:var(–parchment-dim);
font-size:0.98rem;
margin:0 0 16px;
}
.track ul{
margin:0 0 26px;
padding:0 0 0 18px;
color:var(–parchment-dim);
font-size:0.95rem;
}
.track li{ margin-bottom:8px; }
/* ———- BIO ———- */
.bio-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:64px;
}
.bio-grid p{
color:var(–parchment-dim);
font-size:1.02rem;
margin:0 0 20px;
}
.bio-grid p:first-child{
color:var(–parchment);
font-size:1.12rem;
}
.fact-list{
list-style:none;
margin:0;
padding:0;
}
.fact-list li{
padding:16px 0;
border-top:1px solid var(–line);
font-size:0.95rem;
color:var(–parchment-dim);
}
.fact-list li:last-child{
border-bottom:1px solid var(–line);
}
.fact-list .label{
display:block;
font-size:0.8rem;
letter-spacing:0.03em;
color:var(–gold-dim);
margin-bottom:4px;
}
.fact-list .value{
color:var(–parchment);
}
/* ———- CONTACT ———- */
#contact{
padding-bottom:0;
}
.contact-panel{
background:var(–panel-2);
border:1px solid var(–line);
border-radius:18px;
padding:64px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:48px;
align-items:center;
}
.contact-panel h2{
font-size:2.4rem;
color:var(–parchment);
}
.contact-panel p{
margin-top:18px;
color:var(–parchment-dim);
max-width:40ch;
}
.contact-details{
text-align:left;
}
.contact-details .row{
padding:16px 0;
border-top:1px solid var(–line);
}
.contact-details .row:last-child{
border-bottom:1px solid var(–line);
}
.contact-details .label{
font-size:0.82rem;
color:var(–gold-dim);
letter-spacing:0.03em;
margin-bottom:6px;
}
.contact-details .value{
font-size:1.08rem;
color:var(–parchment);
text-decoration:none;
}
.contact-details .value:hover{
color:var(–gold);
}
/* ———- FOOTER ———- */
footer{
margin-top:80px;
padding:40px 0 50px;
}
footer .wrap{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:14px;
}
footer p{
margin:0;
font-size:0.85rem;
color:var(–parchment-dim);
}
footer a{
text-decoration:none;
color:var(–gold-dim);
}
footer a:hover{
color:var(–gold);
}
/* ———- RESPONSIVE ———- */
@media (max-width: 860px){
.wrap{ padding:0 24px; }
.hero-grid,
.about-grid,
.bio-grid,
.gear-columns,
.section-head,
.contact-panel,
.track-grid{
grid-template-columns:1fr;
}
header.hero::before{ display:none; }
.hero-text h1{ font-size:2.6rem; }
header.page-head h1{ font-size:2.4rem; }
blockquote{ font-size:1.5rem; }
.channel{
grid-template-columns:1fr;
gap:8px;
}
.contact-panel{ padding:40px 26px; }
header.hero,
header.page-head{ padding:40px 0 40px; }
section{ padding:60px 0; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ transition:none !important; }
}
About the studio
One room, two ways in.
Form & Frequency is a one-room studio in Tiffin, Ohio, built over two decades of writing — piano demos, full-band arrangements, poetry set to sound, whatever the song asked for. It runs two tracks: a handful of free sessions each month for local artists who just need a place to record, and paid professional production for anyone with a project to finish.
COMMUNITY
Free studio time
A limited number of free sessions are open each month to musicians, songwriters, and poets in and around Tiffin who need a place to record but not a bill to go with it. This isn’t a giveaway gimmick — it’s the same room, the same gear, the same attention as a paid session.
- Local Tiffin-area artists, by request
- A few free slots per month, first come
- Best for a single song, demo, or short session
- You leave with a real, mixed recording
Request a free session
PROFESSIONAL
Paid production
For albums, EPs, ghostwriting projects, and anything that needs sustained studio time. Full tracking, mixing, and mastering, run start to finish by the same person who built the room.
- Full albums, EPs, and multi-song projects
- Session work, composition, and ghostwriting
- Rates discussed per project, not per hour
- Priority scheduling over community sessions
See professional services
Form & Frequency is run by Matthew P. Haubert, an independent composer, poet, and visual artist working under the creative brand Fracture & Form. He holds a music composition degree and has spent over twenty years writing songs, poems, and visual art from the same home base in Ohio.
He records, mixes, and masters everything himself — Reaper and Cubase for tracking and mixing, Dorico for notation and scoring. He’s several years into recording demo versions of a 1,600-song catalog written since 2007, which means most of what happens in this room, he’s already done for himself first.
The free sessions exist for the same reason the studio does: because a room like this only matters if the people around it can actually use it.
- LocationTiffin, Ohio
- Runs the roomMatthew P. Haubert
- BackgroundMusic composition degree, 20+ years writing
- Also known forFracture & Form
- In-house toolsReaper, Cubase, Dorico
