/* Juniper Island identity, November 2026.
   One typeface family, GT America, in four styles (licensed: Grilli Type order 126334).
   It is fitted to pages that were built for the system font, not dropped in:
   GT America runs about 9% wider and looks heavier at the same weight setting. So the letters are set 4% smaller
   and a touch closer, headlines go one weight lighter (Light where a page asks for 400, Regular where it asks
   for 500), and the wide-capital labels are set smaller. Lines then break where they broke before.
   Measured Nov 11, 2026. Source and reasons: Brand-Designer/assets/identity-2026/README.md */
@font-face{font-family:"JI Sans";src:url("/fonts/gt-america/GT-America-Standard-Regular.woff2") format("woff2");font-weight:100 449;font-style:normal;font-display:swap;size-adjust:96%}
@font-face{font-family:"JI Sans";src:url("/fonts/gt-america/GT-America-Standard-Medium.woff2") format("woff2");font-weight:450 900;font-style:normal;font-display:swap;size-adjust:96%}
@font-face{font-family:"JI Display";src:url("/fonts/gt-america/GT-America-Standard-Light.woff2") format("woff2");font-weight:100 449;font-style:normal;font-display:swap;size-adjust:96%}
@font-face{font-family:"JI Display";src:url("/fonts/gt-america/GT-America-Standard-Regular.woff2") format("woff2");font-weight:450 900;font-style:normal;font-display:swap;size-adjust:96%}
@font-face{font-family:"JI Label";src:url("/fonts/gt-america/GT-America-Extended-Medium.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:86%}
:root{--font-sans:"JI Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-family-system:"JI Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ji-berry-red:#D42B20;--ji-deep-red:#B3261E}
.ji-fit{letter-spacing:-.02em}
.ji-fit h1,.ji-fit h2,.ji-heads h1,.ji-heads h2{font-family:"JI Display","JI Sans",system-ui,sans-serif!important}
.ji-fit h1{letter-spacing:-.04em!important}
.ji-fit h2{letter-spacing:-.012em}
.bridge-label{font-family:"JI Label","JI Sans",system-ui,sans-serif;letter-spacing:.1em}
/* The logo, in place of the typed name. */
.ji-logo{display:inline-block;line-height:0;vertical-align:middle}
.ji-logo img{display:block;height:33px;width:auto}
.showreel-home .hero-brand img{height:46px}
.ji-logo--line{vertical-align:-2px}
.ji-logo--line img{height:14px}
/* The side rail on case pages: the name reads upward, the berry stays upright. Drawn that way, so it is not rotated here. */
.floating-logo{left:1.5rem}
.floating-logo img{height:auto;width:13px;transform:none;filter:none;display:block}
@media(max-width:768px){.ji-logo img{height:30px}.ji-logo--line img{height:13px}.showreel-home .hero-brand img{height:36px}.floating-logo{left:50%}.floating-logo img{width:auto;height:14px}}
/* Headers, tidied. Every bar header shows the logo and three links at one size. A page leaves out the link to itself:
   service pages show Work, Journal, Contact; the Journal shows Services, Work, Contact; articles show Services,
   Journal, Contact. Articles get the same bar as the Journal page in place of a small text row. */
.social-top .social-nav a:not(.ji-logo){font-size:16px}
.ji-heads .nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ji-heads .nav .ji-nav-links{display:flex;gap:26px}
.ji-heads .nav .ji-nav-links a{font-size:16px}
/* The homepage contact form, tidied to match the form on the service pages: labels above square fields, one button. */
.ji-enquiry{max-width:780px;margin-top:32px;text-align:left}
.ji-enquiry .ji-form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ji-enquiry label{display:block;font-size:17px;color:#e8e6df;margin-bottom:22px}
.ji-enquiry input,.ji-enquiry textarea{display:block;box-sizing:border-box;width:100%;background:#171717;color:#fff;border:1px solid #555;border-radius:0;font:inherit;font-size:18px;padding:13px 14px;margin-top:9px}
.ji-enquiry textarea{resize:vertical}
.ji-enquiry input:focus,.ji-enquiry textarea:focus{outline:2px solid #d9c6ad;outline-offset:3px}
.ji-enquiry textarea::placeholder{color:#aaa}
.ji-enquiry button,.ji-enquiry button.inline-form-submit{background:#f7f5ef;color:#24241f;border:0;border-radius:0;padding:15px 22px;font:inherit;font-size:18px;cursor:pointer;text-decoration:none;width:auto;margin:6px 0 0;opacity:1;letter-spacing:inherit}
.ji-enquiry button:hover{background:#fff;color:#24241f}
@media(max-width:700px){.ji-enquiry .ji-form-row{grid-template-columns:1fr;gap:0}.ji-heads .nav .ji-nav-links{gap:20px}.ji-heads .nav .ji-nav-links a:first-child{display:none}}
/* One footer for every page: a paper field with the red-dot logo and the sitemap, standing on a slim deep red base
   bar, the same red bar the studio's tools carry at the top. Room does the work, not size.
   Three tries are on record (Johnny, Nov 11). The logo at the full width of the page: "insane... unhinged".
   A deep red field: "shockingly red. There are no red elements down the page". All black: "I kind of miss the red
   now... going from a black section to a black footer is a bit disappointing". */
.ji-footer{margin:0!important;padding:0!important;border:0!important;border-top:1px solid #D5D0C4!important;background:#F7F5EF;color:#24241F;font-family:"JI Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.5;letter-spacing:-.02em;text-align:left;width:auto;max-width:none}
.ji-footer *{box-sizing:border-box}
.ji-footer__in{max-width:1240px;margin:0 auto;padding:104px 40px 112px}
.ji-footer__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.62fr));gap:48px;align-items:start}
.ji-footer a,.ji-footer a:visited{color:#24241F;text-decoration:none;opacity:1}
.ji-footer a:hover{color:#24241F;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ji-footer a:focus-visible{outline:2px solid #24241F;outline-offset:4px}
.ji-footer__mark{display:inline-block;line-height:0}
.ji-footer__mark img{display:block;height:20px;width:auto}
.ji-footer__line{font-family:"JI Display","JI Sans",system-ui,sans-serif;font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-.03em;margin:34px 0 0;padding:0;color:#24241F}
.ji-footer__head{font-family:"JI Label","JI Sans",system-ui,sans-serif;font-size:13px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 16px;padding:0;color:#77705F;font-weight:400}
.ji-footer__col a{display:block;padding:5px 0}
.ji-footer__bar{background:#B3261E;color:#F7F5EF}
.ji-footer__bar-in{max-width:1240px;margin:0 auto;padding:20px 40px;display:flex;justify-content:space-between;gap:24px;font-size:14px;letter-spacing:-.01em}
.ji-footer .ji-footer__bar a,.ji-footer .ji-footer__bar a:visited,.ji-footer .ji-footer__bar a:hover{color:#F7F5EF}
.ji-footer .ji-footer__bar a:focus-visible{outline-color:#F7F5EF}
@media(max-width:900px){.ji-footer__in{padding:72px 24px 80px}.ji-footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.ji-footer__lead{grid-column:1/-1}.ji-footer__bar-in{padding:18px 24px}}