/* The Artisanal Collective, site v4.
   Two typefaces only: Helvetica (Helvetica Neue, then Helvetica, then Arial) bold for headings and Instrument Sans (everything else).
   Interface colour is black and white plus white grounds. The gold wordmark is SVG artwork.
   Shared by the home page, the privacy page and the 404 page. */

@font-face{font-family:"Instrument Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}

:root{
  /* colour tokens: black, white, and three section grounds */
  --black:#000000;
  --white:#FFFFFF;
  --g0:#FFFFFF;           /* ground 0, white */
  --g1:#FFFFFF;           /* ground 1, white */
  --g2:#FFFFFF;           /* ground 2, white */
  --g0-rgb:255 255 255;
  --g1-rgb:255 255 255;
  --g2-rgb:255 255 255;
  --black-rgb:0 0 0;

  --head:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans",sans-serif;
  --body:"Instrument Sans",sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
  --sec-pad:clamp(29px,4.3vw,61px);            /* one third of the first build (88 to 184px) */
  --blend:clamp(27px,3.7vw,53px);          /* soft overlap between sections, kept within the section padding */
  --blend-hero:clamp(53px,10.7svh,113px);   /* hero photograph lifts away over this distance */
  --hero-h:calc(100svh / 1.3);             /* visible hero height: the full screen divided by 1.3 */
  --blend-foot:64px;       /* the cream ground fades into the black footer over this distance */
  --hdr-h:72px;

  /* film frame ratio: one place to change if the finished film is not 9:16 */
  --film-w:9;
  --film-h:16;

  /* tagline sizing: each of the two lines fits the width on its own */
  --tag-fs:min(2.1rem,calc((100vw - 2 * var(--gutter)) / 15));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black);-webkit-text-size-adjust:100%;font-style:normal}
body{margin:0;background:var(--g0);color:var(--black);font:400 1.125rem/1.65 var(--body);font-style:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
em,i,cite,address,dfn,var{font-style:normal}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
::selection{background:var(--black);color:var(--white)}

h1,h2,h3{font-family:var(--head);font-weight:700;font-style:normal;color:var(--black);margin:0;line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(2rem,3.7vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.visually-hidden input{border:0;background:transparent}
.skip{position:absolute;left:-999px;top:8px;background:var(--black);color:var(--white);padding:10px 14px;z-index:200;text-decoration:none}
.skip:focus{left:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* focus rings are black on light grounds, white on photographs and the black footer */
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.site-header:not(.solid) :focus-visible,.site-footer :focus-visible,.hero :focus-visible{outline-color:var(--white)}

/* round cursor: a small black dot with a white edge, a larger ring over links and buttons; text fields keep the text cursor */
html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 12 12,auto}
a,button,summary,label[for],select,input[type=checkbox],[role=button],.btn{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 18 18,pointer}
input[type=text],input[type=email],textarea{cursor:text}
.btn[disabled]{cursor:progress}

/* ---------- buttons: one style site-wide ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--black);color:var(--white);border:1px solid var(--black);border-radius:0;font:500 1rem/1 var(--body);letter-spacing:.01em;padding:17px 28px;text-decoration:none;cursor:pointer;transition:background-color .25s ease,color .25s ease;-webkit-appearance:none;appearance:none}
.btn:hover{background:var(--white);color:var(--black)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-sm{font-size:.8125rem;padding:10px 14px}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--hdr-h);padding:14px var(--gutter);color:var(--white);transition:color .4s ease}
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;transition:opacity .5s ease;background:var(--white);box-shadow:0 1px 0 var(--black);opacity:0}
.site-header.solid{color:var(--black)}
.site-header.solid::after{opacity:1}
.brand{display:block;line-height:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.brand img{width:clamp(150px,21vw,300px);height:auto}
.site-header.brand-on .brand,.site-header.always-brand .brand{opacity:1;visibility:visible;transition:opacity .6s ease}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,32px);margin-left:auto}
.nav a:not(.btn){color:inherit;text-decoration:none;font:500 .9375rem/1 var(--body);letter-spacing:.01em;padding:8px 0}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav .btn{padding:13px 20px}
.nav .short{display:none}
@media (max-width:560px){
  .nav{gap:14px}
  .nav .btn{padding:11px 15px}
  .nav .long{display:none}
  .nav .short{display:inline}
  .brand img{width:clamp(132px,38vw,190px)}
}
/* legal and 404 pages: header is solid and always shows the wordmark */
.site-header.page{position:sticky}
body.has-sticky-header{padding-top:0}

/* ---------- hero ---------- */
.hero{position:relative;height:var(--hero-h);background:var(--black);overflow:hidden}
.hero-media{position:absolute;left:0;right:0;top:-12%;bottom:0;will-change:transform;background:var(--black)}
.js .hero-media{opacity:0;transition:opacity 1.4s ease}
.js .hero-media.ready{opacity:1}
.slide{position:absolute;inset:0;margin:0;opacity:0}
.slide.on{opacity:1;transition:opacity 1.1s ease}
.slide.top{z-index:2}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,.45))}
.hero-shade{position:absolute;left:0;right:0;top:0;height:var(--hero-h);pointer-events:none;background:radial-gradient(ellipse 64% 44% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 74%)}
.lockup{position:absolute;left:0;right:0;top:0;height:var(--hero-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.4vh,32px);padding:0 var(--gutter);text-align:center;color:var(--white);pointer-events:none}
.lockup-mark{width:min(92vw,960px);height:auto}
.tagline{margin:0;font:400 var(--tag-fs)/1.3 var(--body);letter-spacing:.02em;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.tagline .tl{display:block;white-space:nowrap}
.js .lockup-mark{opacity:0;transition:opacity 1.8s ease}
.js .lockup-mark.in{opacity:1}
/* the two tagline lines each have their own line and arrive from the back of the page: small, soft and faint, then growing into place and into focus */
.js .tagline .tl{opacity:0;transform:scale(.72);filter:blur(12px);transition:opacity 2.6s cubic-bezier(.2,.6,.2,1),transform 2.6s cubic-bezier(.2,.6,.2,1),filter 2.6s cubic-bezier(.2,.6,.2,1)}
.js .tagline.in .tl{opacity:1;transform:none;filter:none}
.js .tagline.in .tl:nth-child(2){transition-delay:1.2s}

/* ---------- sections: grounds blend softly into each other ---------- */
.sec{position:relative;--gr:var(--g0-rgb);background:rgb(var(--gr));padding:var(--sec-pad) 0}
.sec.g0{--gr:var(--g0-rgb)}
.sec.g1{--gr:var(--g1-rgb)}
.sec.g2{--gr:var(--g2-rgb)}
.sec::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--blend);pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--gr) / 0) 0%,rgb(var(--gr) / .03) 10%,rgb(var(--gr) / .10) 22%,rgb(var(--gr) / .24) 36%,rgb(var(--gr) / .44) 50%,
    rgb(var(--gr) / .66) 64%,rgb(var(--gr) / .84) 78%,rgb(var(--gr) / .95) 90%,rgb(var(--gr) / 1) 100%)}
.hero + .sec::before{display:none}
.sec + .sec{border-top:1px solid #EEEEEE}
/* all white, sections divided by one very faint grey line */
.sec::before{display:none}
section[id]{scroll-margin-top:calc(var(--hdr-h) - 8px)}

/* scroll motion: blocks start hidden and are driven by scroll position (js/home.js) */
.js [data-rv]{opacity:0}
.nomotion [data-rv]{opacity:1!important;transform:none!important}
@media print{.js [data-rv]{opacity:1!important;transform:none!important}}

/* 1 what the collective is: proposition and lede */
.collective h2{font-size:clamp(1.3rem,2.6vw,2.2rem);text-wrap:balance;margin-bottom:clamp(10px,1.3vw,19px)}
.collective .lede{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.5;max-width:40ch;margin:0}

/* 3 our story: Alida's story and portrait, its own section under The Art of Pleating */
.story .wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--story-pw);column-gap:clamp(36px,7vw,120px);align-items:stretch;--story-pw:clamp(190px,27vw,380px)}
.story-head{font-size:clamp(1.3rem,1.85vw,1.65rem);line-height:1.12;margin:0 0 clamp(16px,1.8vw,26px);text-wrap:balance;max-width:30ch}
.story-text p{max-width:54ch}
.story-text p:last-child{margin-bottom:0}
/* the portrait is as tall as the heading plus the two paragraphs (stretched to the text block), 3:4 portrait crop */
.story .portrait{position:relative;overflow:hidden;aspect-ratio:auto;width:100%;height:100%;min-height:0;justify-self:end;align-self:stretch;border:0}
.story .portrait .drift{object-position:50% 20%}

/* 2 join */
.join .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(36px,7vw,120px);row-gap:clamp(12px,2.3vw,40px);align-items:start}
.join h2{margin-bottom:clamp(18px,2.2vw,30px)}
.join .intro p{max-width:40ch}
.field{margin:0 0 30px}
.field label{display:block;font:500 .875rem/1.2 var(--body);letter-spacing:.02em;color:var(--black);margin-bottom:6px}
.req{font-weight:400;letter-spacing:0}
.field input[type=text],.field input[type=email],.field select{width:100%;font:400 1.0625rem/1.4 var(--body);color:var(--black);background:transparent;border:0;border-bottom:1px solid var(--black);border-radius:0;padding:12px 0;-webkit-appearance:none;appearance:none}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:28px;cursor:pointer}
.field input:focus,.field select:focus{outline:none;border-bottom:2px solid var(--black);padding-bottom:11px}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--black);outline-offset:4px}
.field [aria-invalid=true]{border-bottom:3px solid var(--black);padding-bottom:10px}
.err{display:none;margin:8px 0 0;padding-left:10px;border-left:3px solid var(--black);font-size:.9375rem;line-height:1.4}
.field.bad .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;margin:0 0 30px}
.consent input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:3px 0 0;border:1px solid var(--black);border-radius:0;background:var(--white);cursor:pointer}
.consent input:checked{background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='1.8'/%3E%3C/svg%3E") center / 14px 14px no-repeat}
.consent label{font-size:.9375rem;line-height:1.55;margin:0}
.consent a{text-decoration:underline;text-underline-offset:3px}
.status{display:none;margin:26px 0 0;padding:14px 16px;border-left:3px solid var(--black);font-size:.9375rem;line-height:1.5}
.status.show{display:block}
.done-msg{display:none;padding:28px;border-left:3px solid var(--black)}
.done-msg:focus{outline:none}
.done-msg h3{margin-bottom:10px}
.done-msg p{max-width:46ch}
.done-msg.show{display:block}
form.sent{display:none}

/* 3 the art of pleating */
.film{--film-col:calc(min(84svh,780px) * var(--film-w) / var(--film-h));display:grid;grid-template-columns:1fr;column-gap:clamp(32px,6vw,104px);row-gap:clamp(11px,2vw,35px);align-items:center}
@media (min-width:980px){.film{grid-template-columns:var(--film-col) minmax(0,1fr)}}
@media (max-width:979px){.film-body{order:-1}}   /* stacked layout: the words arrive first, the film follows */
.film-video{position:relative;width:min(100%,var(--film-col));aspect-ratio:var(--film-w) / var(--film-h);background:var(--black);overflow:hidden}
.film-video video,.film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-still{opacity:0;transition:opacity .8s ease;pointer-events:none}
.film-video.rest .film-still{opacity:1}
.video-toggle{position:absolute;left:12px;bottom:12px;z-index:2}
.film-body h2{margin-bottom:clamp(14px,1.8vw,22px)}
.film-body .sub{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.4;font-weight:500;max-width:34ch}
.film-body p{max-width:52ch}
.when{margin:clamp(22px,2.6vw,32px) 0 18px;padding-top:16px;border-top:1px solid var(--black);font-weight:500;line-height:1.5;max-width:34ch}
.when span{display:block}
.film-body .btn{margin-top:6px}
.credit{margin:clamp(24px,3vw,36px) 0 0;font-size:.875rem;line-height:1.55;max-width:52ch}
.credit-block{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:clamp(28px,4vw,56px);row-gap:10px}
/* both logos share row 2, one height, one centre line; RMIT caption above, Creative Victoria caption below */
.credit-block .cap{margin:0;font-size:.6875rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.cap-rmit{grid-column:1;grid-row:1}
.logo-rmit{grid-column:1;grid-row:2}
.logo-cv{grid-column:2;grid-row:2}
.cap-cv{grid-column:2;grid-row:3}
.cap-cv span{display:block;white-space:nowrap}
.credit-block img{height:42px;width:auto;max-width:none}
@media(max-width:560px){.credit-block{grid-template-columns:auto;row-gap:10px}
.cap-rmit{grid-row:1}.logo-rmit{grid-row:2;grid-column:1}
.logo-cv{grid-row:3;grid-column:1;margin-top:18px}.cap-cv{grid-row:4;grid-column:1}.credit-block .cap{letter-spacing:.035em;font-size:.625rem}}
html[data-phase="pre"] [data-show="post"],html[data-phase="post"] [data-show="pre"]{display:none}
.thumbs{display:none;margin-top:clamp(16px,2.3vw,35px)}
/* the five pictures fade in one by one, slowly; they fade back out together once the row has left the screen, so the sequence repeats */
.js .thumbs .frame{opacity:0;filter:blur(10px);transition:opacity .6s ease,filter .6s ease}
.js .thumbs.seq-in .frame{opacity:1;filter:blur(0);transition:opacity 3.2s cubic-bezier(.3,0,.2,1) calc(var(--n) * 1.1s),filter 3.2s cubic-bezier(.3,0,.2,1) calc(var(--n) * 1.1s)}
.nomotion .thumbs .frame{opacity:1!important;filter:none!important;transition:none!important}
@media (min-width:900px){.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px)}.thumbs-fade{display:none}}
/* phones and tablets: the five pictures are one slow cross-fade; the incoming picture fades in over the outgoing one, so there is no dip */
.thumbs-fade{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-top:clamp(15px,3.3vw,21px);border:0;overflow:hidden;background:var(--g2)}
.fade-frame{position:absolute;inset:0;margin:0;overflow:hidden}
.fade-frame img{opacity:0;transition:opacity 1.3s ease}
.fade-frame.on{z-index:2}
.fade-frame.on img{opacity:1}
.fade-frame.prev{z-index:1}
.fade-frame.prev img{opacity:1;transition:none}
.frame{position:relative;margin:0;overflow:hidden;aspect-ratio:1;border:0;background:var(--g2)}
/* soft shadow on every photograph and the film panel (the full-bleed hero is the page's edge, so it has none) */
.frame,.thumbs-fade,.film-video{box-shadow:0 12px 34px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.12)}
.frame .drift,.fade-frame .drift{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}

/* stack the two-column sections on tablets and phones */
@media (max-width:860px){
  .join .wrap{grid-template-columns:minmax(0,1fr)}
  .story .wrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3vw,28px)}
  .story .portrait{justify-self:start;width:160px;height:auto;aspect-ratio:3 / 4}
}

/* ---------- footer ---------- */
.site-footer{position:relative;--gr:var(--black-rgb);background:var(--black);color:var(--white);padding:clamp(24px,3vw,40px) 0 clamp(20px,2vw,28px)}
.site-footer a{color:var(--white);text-decoration:none}
.site-footer a:hover,.site-footer .linkbtn:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:clamp(11px,2vw,32px);align-items:start}
.foot-mark{width:min(100%,360px);height:auto;margin-left:-6px}
.foot-brand{container-type:inline-size}
.foot-tag{margin:18px 0 0;font:400 min(1.0625rem,calc(100cqw / 25.8))/1.4 var(--body);letter-spacing:.02em;white-space:nowrap}
.foot-nav{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-nav a,.foot-mail{font:500 .9375rem/1.4 var(--body)}
.foot-mail{margin:0}
.ack{margin-top:clamp(16px,2vw,27px);padding-top:28px;border-top:1px solid rgba(255,255,255,.35)}
.ack p{margin:0;max-width:78ch;font-size:.875rem;line-height:1.7}
.foot-legal{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:.875rem}
.foot-legal .copy{margin:0 0 0 auto}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}.foot-legal .copy{margin-left:0;width:100%}}

/* ---------- cookie bar: white with a black rule, two matching buttons ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--white);color:var(--black);border-top:1px solid var(--black)}
.cookie[hidden]{display:none}
.cookie-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;gap:16px 40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie p{margin:0;font-size:.9375rem;line-height:1.5;max-width:62ch}
.cookie a{text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:12px}
.cookie .btn{padding:13px 24px}

/* ---------- privacy and 404 ---------- */
.page-sec{--gr:var(--g1-rgb);background:rgb(var(--gr));padding:clamp(48px,7vw,104px) 0 var(--blend-foot)}
.legal h1{font-size:clamp(2.2rem,4.5vw,3.6rem);margin-bottom:12px}
.legal .updated{margin-bottom:2.2em}
.legal-body{max-width:70ch}
.legal-body h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:1.9em 0 .5em}
.legal-body li{margin-bottom:.4em}
.legal-body a,.legal-body .linkbtn{text-decoration:underline;text-underline-offset:3px}
.tk{font-weight:600;border-bottom:2px dotted var(--black)}
.nf{min-height:62svh;display:flex;align-items:center}
.nf h1{font-size:clamp(2.2rem,4.5vw,3.6rem);margin:0 0 32px}

/* ---------- reduced motion: no movement, no parallax; content is simply visible ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media{will-change:auto}
  .js .hero-media{transition:opacity .4s ease}
  .js .lockup-mark{transition:opacity .4s ease}
  .js .tagline .tl{transform:none;filter:none;transition:opacity .4s ease}
  .js .tagline.in .tl:nth-child(2){transition-delay:.2s}
  .slide.on{transition:none}
  .js [data-rv]{opacity:1}
  .js .thumbs .frame{opacity:1;filter:none;transition:none}
  .frame .drift,.fade-frame .drift{will-change:auto}
  .fade-frame img{transition:none}
}