.trinko-intro { position:absolute; left:7%; top:43%; transform:translateY(-50%); width:32%; max-width:360px; }
.trinko-intro h1 { font-size:44px; line-height:1; margin:0 0 18px; }
.trinko-intro p { font-family:"TRINX EB Garamond",Georgia,serif; font-size:20px; line-height:1.35; }
@media(max-width:700px) { .trinko-intro { left:24px; top:65%; width:calc(100% - 48px); max-width:300px; } .trinko-intro h1 { font-size:32px; margin-bottom:10px; } .trinko-intro p { font-size:17px; } .trinko-page .frame-portrait { top:35%; } }
@media(max-width:700px) and (max-height:650px) { .trinko-intro { top:59%; } .trinko-intro h1 { font-size:28px; margin-bottom:6px; } .trinko-intro p { font-size:16px; } }
/* One shared paper layer sits above type, logo and photography. */
.reference-landing { isolation:isolate; }
.reference-landing::after { content:""; position:fixed; inset:0; z-index:20; pointer-events:none; background:url("media/background-texture.webp") center / cover no-repeat; filter:grayscale(1) brightness(.6) contrast(3); opacity:.18; }
/* White single-screen layout with a small, uncropped vintage photograph. */
.frame-portrait { position:absolute; right:7%; top:43%; transform:translateY(-50%); width:clamp(260px,31vw,420px); margin:0; }
.frame-portrait img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:700px) { .frame-portrait { right:24px; width:180px; top:40%; } }
@media(max-height:500px) { .frame-portrait { top:35%; width:180px; } }
.reference-landing { margin:0; padding:16px; height:100svh; min-height:100svh; background:#FFFFFF url("media/background-texture.webp") center / cover no-repeat; color:#161811; }
.landing-frame { position:relative; min-height:0; height:100%; display:flex; flex-direction:column; justify-content:space-between; background:transparent; border-radius:24px; padding:32px 48px 62px; }
.frame-header { display:flex; align-items:flex-start; }
.frame-logo { display:block; width:130px; height:auto; }
@media(max-width:700px) { .frame-logo { width:100px; } }
@media(max-height:500px) { .frame-logo { width:90px; } }
.frame-brand { display:block; font-family:"TRINX EB Garamond",Georgia,serif; font-size:48px; line-height:.86; letter-spacing:-.03em; text-decoration:none; }
.frame-brand span { display:block; margin-top:7px; font-size:18px; letter-spacing:0; line-height:1; }
.frame-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding:0 48px; }
.frame-nav { display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:0; padding:0; }
.frame-nav a { min-height:48px; font-family:"TRINX EB Garamond",Georgia,serif; font-size:28px; font-weight:400; line-height:1.15; text-decoration:none; }
.frame-nav a[aria-current="page"] { text-decoration:none; }
.frame-nav a:hover, .frame-nav a:focus-visible { color:#161811; text-decoration:underline; text-underline-offset:5px; }
.reference-landing :focus-visible { outline:2px solid #161811; outline-offset:5px; }
.frame-contact { text-align:right; padding-bottom:10px; }
.frame-contact p { font-family:"TRINX EB Garamond",Georgia,serif; font-size:25px; line-height:1.05; letter-spacing:-.015em; }
.frame-domain { display:block; margin-top:24px; font:13px/1.4 "Helvetica Neue",Arial,sans-serif; }
@media(max-width:700px) { .reference-landing { padding:10px; } .landing-frame { border-radius:18px; padding:26px 24px 34px; } .frame-brand { font-size:44px; } .frame-bottom { padding:0; gap:20px; } .frame-nav { gap:4px; } .frame-nav a { font-size:24px; } .frame-contact p { font-size:20px; } .frame-domain { font-size:10px; margin-top:18px; } }
@media(max-width:360px) { .landing-frame { padding-inline:20px; } .frame-bottom { gap:12px; } .frame-nav a { font-size:22px; } .frame-contact p { font-size:18px; } .frame-domain { font-size:9px; } }
@media(max-height:500px) { .landing-frame { padding-block:20px 22px; } .frame-brand { font-size:36px; } .frame-nav a { font-size:22px; min-height:44px; } .frame-contact p { font-size:24px; } }
@media(max-height:350px) { .reference-landing { height:auto; } .landing-frame { min-height:320px; gap:32px; } }