@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/type-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/type-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/type-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/fonts/type-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/fonts/type-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/fonts/type-5.ttf) format('truetype');
}

:root{--ink:#192a2a;--teal:#08666a;--paper:#faf8f3;--muted:#576665;--line:#d8ded7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:inherit}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}.wrap{max-width:1240px;margin:auto;padding-left:48px;padding-right:48px}.topline{text-align:center;background:var(--ink);color:#fff;font-size:10px;letter-spacing:2.5px;padding:10px 16px}header{max-width:1340px;margin:auto;padding:25px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:31px;text-decoration:none;font-style:italic;line-height:1}.brand span{display:block;font:10px Arial,sans-serif;letter-spacing:5px;margin-top:9px;text-align:center}nav{display:flex;align-items:center;gap:32px;font-size:13px}nav a{text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--teal);color:white;border:1px solid var(--teal);padding:15px 24px;text-decoration:none;font-size:13px;font-weight:600;border-radius:3px}.button:hover{background:#104f52}.small{padding:11px 18px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding-top:68px;padding-bottom:70px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:var(--teal);margin:0 0 22px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.08;letter-spacing:-1.7px;margin:0 0 24px}h1{font-size:66px}h2{font-size:48px}em{color:var(--teal);font-weight:400}.intro{max-width:410px;font-size:16px;color:var(--muted);margin-bottom:28px}.textlink{display:inline-block;font-size:12px;text-underline-offset:5px}.hero .textlink{margin:20px 0 0;display:block}.note{font-size:11px;color:var(--muted);margin-top:30px}.hero-image{margin:0;background:#d8e5df;position:relative;min-height:475px;border-radius:140px 6px 6px 6px;overflow:hidden}.hero-image img{width:100%;height:475px;object-fit:cover;object-position:56% center;display:block}.hero-image figcaption{position:absolute;bottom:20px;left:20px;right:20px;padding:16px 20px;background:rgba(250,248,243,.95);border-radius:3px}.hero-image figcaption span{display:block;font-size:9px;letter-spacing:2px;color:var(--teal)}.hero-image strong{font-family:Georgia,serif;font-weight:400;font-size:20px}.ribbon{display:flex;justify-content:center;gap:55px;padding:17px 20px;background:#e4ece7;color:var(--teal);font-size:12px;letter-spacing:1px}.collection,.process{padding-top:85px;padding-bottom:85px}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:30px}.sectionhead>p{max-width:300px;color:var(--muted);font-size:14px;margin-bottom:27px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:25px}.products article{border-top:1px solid #9daea4;padding:28px 0}.number{font-size:9px;letter-spacing:1.4px;color:var(--teal)}h3{font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1.25;margin:20px 0 12px}.products p,.steps p{font-size:14px;color:var(--muted)}.product-link{border:0;background:none;color:var(--teal);padding:10px 0;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:5px}.backstage{background:var(--ink);color:white}.feature{display:grid;grid-template-columns:1fr 1fr;gap:85px;padding-top:75px;padding-bottom:75px}.backstage .eyebrow,.backstage em{color:#9dd5c8}.feature h3{margin-top:0}.feature p{font-size:14px;color:#d5e0dd}.fit{border-top:1px solid #51625d;padding-top:18px}.light{background:#e1ece5;color:var(--ink);border-color:#e1ece5}.light:hover{background:white}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:35px}.steps span{font-family:Georgia,serif;font-size:32px;color:var(--teal)}.steps h3{margin-top:10px}.about{display:grid;grid-template-columns:1fr 1.35fr;gap:85px;align-items:center;padding-top:35px;padding-bottom:90px}.about img{width:100%;max-width:310px;mix-blend-mode:multiply}.about p{color:var(--muted);font-size:14px}.about .eyebrow{color:var(--teal)}.request-section{background:#e6ece6;padding:75px 0}.request-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px}.request-grid>div>p:not(.eyebrow){font-size:14px;color:var(--muted)}.request-grid>div>a{display:block;font-size:13px;margin-top:12px;overflow-wrap:anywhere}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:12px;font-weight:600;margin-bottom:17px}input,select,textarea{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #a9bab1;background:var(--paper);color:var(--ink);border-radius:3px;font-size:14px}textarea{resize:vertical}.optional{font-weight:400}.formnote{font-size:11px;color:var(--muted)}#result{margin-top:25px;border-top:1px solid #a9bab1;padding-top:12px}#result p{font-size:13px}#result label{margin-top:20px}#copy-status{font-size:12px;margin-left:12px}.faq{padding-top:75px;padding-bottom:75px;max-width:950px}.faq h2{font-size:38px}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-size:15px}.faq details p{font-size:14px;color:var(--muted)}footer{border-top:1px solid var(--line);padding-top:35px;padding-bottom:35px;display:flex;align-items:center;gap:35px}footer p{margin-right:auto;font-size:12px;color:var(--muted)}footer>a:not(.brand){font-size:12px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #be813a;outline-offset:4px}@media(max-width:800px){.wrap{padding-left:24px;padding-right:24px}header{padding:20px 24px}nav{gap:15px}nav>a:not(.button){display:none}.brand{font-size:26px}.hero{gap:30px;padding-top:45px;grid-template-columns:1fr}h1{font-size:55px}h2{font-size:40px}.hero-image,.hero-image img{height:360px;min-height:0}.ribbon{gap:15px;font-size:10px;text-align:center}.ribbon span:nth-child(even){display:none}.sectionhead{display:block}.products,.steps{grid-template-columns:1fr;gap:10px}.feature,.about,.request-grid{grid-template-columns:1fr;gap:32px}.about img{max-width:220px;justify-self:center}.collection,.process{padding-top:55px;padding-bottom:45px}.feature{padding-top:55px;padding-bottom:55px}.steps{gap:22px}.about{padding-bottom:55px}.request-section{padding:55px 0}footer{flex-wrap:wrap;gap:24px}footer p{width:50%;margin:0}.formrow{grid-template-columns:1fr;gap:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.brand-hero{background:#fff;border-radius:50%;min-height:0;aspect-ratio:1}.brand-hero img{height:100%;width:100%;object-fit:contain}.portfolio{padding-top:80px;padding-bottom:30px}.portfolio-piece{margin:20px 0}.portfolio-piece>a{display:block;background:#0b666d;border-radius:5px;overflow:hidden}.portfolio-piece img{display:block;width:100%;height:auto}.portfolio-piece figcaption{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 0}.portfolio-piece figcaption p{font-size:14px;color:var(--muted);max-width:600px}.portfolio-piece h3{margin:8px 0}.portfolio-piece .button{flex-shrink:0}.contact-options{padding-top:25px;padding-bottom:65px}.contact-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.contact-links a{text-decoration:none;border-top:1px solid #9daea4;padding-top:20px}.contact-links strong{font-size:14px;color:var(--teal)}.contact-links span{display:block;font-size:12px;color:var(--muted);margin-top:8px}@media(max-width:800px){.brand-hero{max-width:350px;justify-self:center;width:100%;height:auto}.brand-hero img{height:auto}.portfolio{padding-top:50px}.portfolio-piece figcaption{display:block}.contact-links{grid-template-columns:1fr 1fr}.portfolio-piece .button{margin-top:10px}}

/* Toutles Trinkets: black, white, and teal brand palette. */
:root{--ink:#ffffff;--teal:#48c4c7;--paper:#050505;--muted:#c0c7c7;--line:#2c3838}
body{background:var(--paper)}
.topline{background:#080f10;color:#fff;border-bottom:1px solid #236164}
header{background:#050505}.brand span{color:var(--teal)}
.button{background:#087a80;border-color:#37aeb3;color:#fff}.button:hover{background:#09646a;border-color:#69d8da}
.ribbon{background:#081c1d;color:#6bdbdc;border-top:1px solid #174144;border-bottom:1px solid #174144}
.brand-hero{background:#000}.brand-hero img,.about img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
.hero-image figcaption{background:#0c1515;color:#fff}
.products article,.contact-links a{border-color:#315355}
.backstage{background:#081516;color:#fff;border-block:1px solid #214244}
.backstage .eyebrow,.backstage em{color:var(--teal)}.feature p{color:#c5d3d3}.fit{border-color:#315355}
.light{background:#087a80;border-color:#37aeb3;color:#fff}.light:hover{background:#09646a;color:#fff}
.request-section{background:#0b1212;border-block:1px solid #264446}
input,select,textarea{background:#050808;border-color:#486061;color:#fff;color-scheme:dark}input::placeholder,textarea::placeholder{color:#a5b3b3;opacity:1}
#result{border-color:#315355}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#78e7e7}


/* Lato for headings and display text; Merriweather for reading and small text. */
body, button, input, textarea, select, .brand span {font-family:"Merriweather",Georgia,serif;}
h1,h2,h3,.brand,.hero-image strong,.steps span {font-family:"Lato",Arial,sans-serif;}
.brand{font-style:normal}
h1{font-size:clamp(40px,4.6vw,62px);letter-spacing:-1.5px}
h2{font-size:clamp(32px,3.5vw,46px);letter-spacing:-1px}
p{line-height:1.8}.eyebrow,.number{line-height:1.6}
.button, .product-link, label{font-weight:700}

/* Portfolio gallery: original product photos with individual inquiry links. */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 30px;margin:28px 0 36px}
.portfolio-grid .portfolio-piece{margin:0;display:flex;flex-direction:column;min-width:0}
.portfolio-grid .portfolio-photo{position:relative;background:#111919;border:1px solid var(--line);border-radius:5px;display:block}
.portfolio-grid .portfolio-photo img{display:block;width:100%;height:390px;object-fit:contain}
.photo-hint{position:absolute;bottom:10px;right:10px;background:#050505ed;color:#fff;border:1px solid #315355;padding:6px 10px;font-size:10px}
.portfolio-grid .portfolio-piece figcaption{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:15px;padding:23px 0 0;flex:1}
.portfolio-grid .portfolio-piece figcaption p{margin-bottom:0}
.portfolio-photo:hover{outline:1px solid var(--teal)}
#design-reference{border-left:3px solid var(--teal);padding:10px 12px;background:#102123;color:#fff}
@media(max-width:800px){.portfolio-grid{grid-template-columns:1fr;gap:35px}.portfolio-grid .portfolio-photo img{height:auto;max-height:440px;min-height:180px}.portfolio-grid .portfolio-piece .button{margin-top:0}}

.contact-links{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.contact-links{grid-template-columns:1fr}}